Как добавить маркер в строку таблицы <tr>

Question

У меня есть таблица, содержащая много строк. Некоторые из этих строк: class="highlight" и обозначают строку, которая должна быть написана по-разному и выделена. То, что я пытаюсь сделать, это добавить дополнительные промежутки до и после этих строк, чтобы они выглядели слегка отделенными от других строк.

Я думал, что могу сделать это с помощью margin-top:10px;margin-bottom:10px;, но он не работает. Кто-нибудь знает, как это сделать, или если это можно сделать? Вот HTML, и я установил второй tr в tbody для выделения класса.

<table> 
<thead> 
    <tr> 
    <th>Header 1</th> 
    <th>Header 2</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
    <tr class="highlight"> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
    <tr> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
    <tr> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
</tbody> 
</table> 

Answer 1

Строки таблицы не могут иметь значения маржи. Можете ли вы увеличить заполнение? Это сработает. В противном случае вы можете вставить <tr class="spacer"></tr> до и после строк class="highlighted".

Answer 2

Вы не можете стиль <tr> себя с, но вы можете дать <td> S внутри «изюминкой» <tr> са стиль, как этот

tr.highlight td {padding-top: 10px; padding-bottom:10px} 

Answer 3

я настоятельно рекомендую вам взглянуть на ваши аналитики и посмотрите, сколько пользователей IE7 или менее вы посещаете сайт. Я обнаружил, что теперь могу отказаться от поддержки IE7, и это означает, что я могу использовать таблицы CSS ..., что значительно упростит работу.

Answer 4

Вы можете попробовать использовать CSS-преобразования для отступов целого тра:

tr.indent { 
    -webkit-transform: translate(20px,0); 
    -moz-transform: translate(20px,0); 
} 

Я думаю, что это правильное решение. Кажется, отлично работает в Firefox 16, Chrome 23 и Safari 6 на моем OSX.

Answer 5

Вот отличный способ я сделал это:

table tr { 
    border-bottom: 4px solid; 
} 

Это добавит 4px вертикального расстояние между каждой строкой. И если вы хотите, чтобы не получить эту границу на последний ребенок:

table tr:last-child { 
    border-bottom: 0; 
} 

напоминания, что CSS3 псевдо-селекторы будут работать только в IE 8 и ниже с selectivizr.

Answer 6

высота линии может быть возможным решением

tr 
{ 
    line-height:30px; 
} 

Answer 7

добавить этот стиль перед классом = «выделено» набивки дна и дисплея встроенного стол

Answer 8

добавить DIV к клеткам что вы хотели бы добавить некоторые дополнительные интервалы:

<tr class="highlight"> 
<td><div>Value1</div></td> 
<td><div>Value2</div></td> 
</tr> 
tr.highlight td div { 
margin-top: 10px; 
} 

Answer 9

свойство border-spacing будет работать для этого particu lar case.

table { 
    border-collapse:separate; 
    border-spacing: 0 1em; 
} 

Reference.

Answer 10

Я знаю, что это своего рода старый, но я просто получил что-то по тем же линиям, чтобы работать. Не могли бы вы это сделать?

tr.highlight { 
    border-top: 10px solid; 
    border-bottom: 10px solid; 
    border-color: transparent; 
} 

Надеюсь, это поможет.

Answer 11

Другая возможность состоит в том, чтобы использовать селектор псевдо: после или до того:

tr.highlight td:last-child:after 
{ 
    content: "\0a0"; 
    line-height: 3em; 
} 

Это может избежать проблем с браузером, которые не понимают псевдо-селекторы, плюс фона цвета не являются проблемой.

Недостатком является то, что он добавляет дополнительные лишние пробелы после последней ячейки.

Answer 12

Я сдался и вставил простой код jQuery, как показано ниже. Это добавит tr после каждого tr, если у вас так много trs, как я. Демо: https://jsfiddle.net/acf9sph6/

<table> 
    <tbody> 
    <tr class="my-tr"> 
     <td>one line</td> 
    </tr> 
    <tr class="my-tr"> 
     <td>one line</td> 
    </tr> 
    <tr class="my-tr"> 
     <td>one line</td> 
    </tr> 
    </tbody> 
</table> 
<script> 
$(function() { 
     $("tr.my-tr").after('<tr class="tr-spacer"/>'); 
}); 
</script> 
<style> 
.tr-spacer 
{ 
    height: 20px; 
} 
</style> 

Answer 13

хака, чтобы создать видимость краев между строками таблицы, чтобы дать им бордюр тот же цвет в качестве фона. Это полезно при стилизации сторонней темы, где вы не можете изменить разметку html. Например:

tr{ 
    border: 5px solid white; 
} 

Answer 14

Поскольку margin игнорируются на tr, я обычно использую обходной путь, установив прозрачную border-bottom или border-top и установку background-clip свойства padding-box так background-color не покраситься под границей.

table { 
    border-collapse: collapse; /* [1] */ 
} 

th, td { 
    border-bottom: 5px solid transparent; /* [2] */ 
    background-color: gold; /* [3] */ 
    background-clip: padding-box; /* [4] */ 
} 

1. убеждается клетка имеет общую границу, но не является обязательным. Решение работает без него.
2. Значение 5px представляет собой запас, который вы хотите достичь
3. Устанавливает background-color вашей строки/ячейки
4. убеждается background получить не окрашены под border

посмотреть демо здесь: http://codepen.io/meodai/pen/MJMVNR?editors=1100

background-clip поддерживается в all modern browser. (И IE9 +)

В качестве альтернативы вы можете использовать border-spacing. Но это не будет работать с border-collapse, установленным на collapse.

Answer 15

Способ имитации поля в строке будет использовать псевдоселектор, чтобы добавить некоторый интервал на td.

.highlight td::before, .highlight td::after 
{ 
    content:""; 
    height:10px; 
    display:block; 
} 

Таким образом, все, что обозначено классом подсветки, будет разделено сверху и снизу.

https://jsfiddle.net/d0zmsrfs/

Answer 16

Прежде всего, не пытайтесь поставить запас на <tr> или <td>, потому что он не будет работать в современной визуализации.

• Решение 1

Хотя запас не работает, обивка делает работу:

td{ 
    padding-bottom: 10px; 
    padding-top: 10px; 
} 

Предупреждение: Это также подтолкнет границу подальше от элемент, если ваша граница видна, вы можете использовать вместо этого решение 2.

• Раствор 2

держать границу близко к элементу и имитировать запас, поставить еще один <tr> между каждым из вашей барабанный стола <tr> так:

<tr> 
    <td> Hello </td><td> Hello</td> 
</tr> 

<tr style="height: 20px;"> <!-- Mimic the margin --> 
</tr> 

<tr> 
    <td> Hello </td><td> Hello</td> 
</tr>