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

У меня есть таблица, содержащая много строк. Некоторые из этих строк относятся к 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>

ОТВЕТЫ

Ответ 1

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

Ответ 2

Свойство border-spacing будет работать в этом конкретном случае.

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

Ссылка.

Ответ 3

Вы не можете сами <tr>, но вы можете дать <td> внутри стиля "выделить" <tr>, как это

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

Ответ 4

line-height может быть возможным решением

tr
{
    line-height:30px;
}

Ответ 5

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

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

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

Ответ 6

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

  • Решение 1

Хотя маржа не работает, отступы работают:

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

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

  • Решение 2

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

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

Ответ 7

Поскольку 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 поддерживается во всех современных браузерах. (И IE9+)

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

Ответ 8

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

table
{
 border-collapse: separate;
 border-spacing: 0 8px;
}

Ответ 9

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

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

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

https://jsfiddle.net/d0zmsrfs/

Ответ 10

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

tr{ 
    border: 5px solid white;
}

Ответ 11

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

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

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

Ответ 12

Вот аккуратный способ я сделал это:

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

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

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

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

Ответ 13

Я сдался и вставил простой код 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>

Ответ 14

добавьте этот стиль перед тем, как класс = "подсвечивается" padding-bottom, а дисплей - inline-table

Ответ 15

добавьте div в ячейки, которые вы хотели бы добавить, чтобы добавить дополнительный интервал:

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

Ответ 16

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

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

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

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

Ответ 17

Вы можете создать пространство между строками таблицы, добавив пустую строку таких ячеек...

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

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

table :empty{border:none; height:10px;}

NB: Этот метод хорош только в том случае, если ни одна из ваших нормальных ячеек не будет пуста/вакантна.

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

Излишне говорить, что вы можете настроить высоту пространства так, как вам нравится, с включенным свойством height.

Ответ 18

Для чего бы то ни было, я воспользовался тем, что уже использовал bootstrap (4.3), потому что мне нужно было добавить margin, box-shadow и border-radius в мою строку, чего я не могу сделать с таблицами.

<div id="loop" class="table-responsive px-4">
<section>
    <div id="thead" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div id="tbody" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</section>
</div>

На CSS я добавил несколько строк для поддержки поведения таблицы при загрузке

@media (max-width: 800px){
    #loop{
        section{
            min-width: 700px;
        }
    }
}

Ответ 19

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