Как поставить интервал между элементами TBODY

Question

У меня есть такая таблица:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Я бы хотел поместить некоторый интервал между каждым элементом tbody, но отступы и margin не влияют. Есть идеи?

Answer 1

Примерно так будет работать, в зависимости от требований поддержки вашего браузера:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

Answer 2

Попробуйте, если не возражаете против отсутствия границ.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Answer 3

Люди всегда будут иметь противоречивые мнения об использовании пустых элементов таблицы для макета страницы (что подтверждается понижением голосов в этом ответе). Я признаю это, но иногда легче использовать их таким образом, когда вы работаете « быстро и грязно ».

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

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

Если у вас нет границ в ячейках таблицы, вы также можете определить высоту для вашей типичной ячейки или строки в таблице стилей, которая равномерно распределяет все строки таблицы.

tr{
   height: 40px;
}

Answer 4

У меня были проблемы с интервалом, должным образом кратным <tbody> с ::before псевдо, в присутствии <tr>, содержащим <td> с rowspan в нескольких браузерах.

В основном, если у вас есть <tbody>, структурированный так:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

И вы следуете тем, кто советует писать css на ::before псевдоэлементе, например:

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Это повлияет на диапазон строк, в результате чего таблица "потеряет" в течение второго <tr>, сколько <td> -спанов присутствует в первом.

Таким образом, если кто-то сталкивается с такой проблемой, решение состоит в том, чтобы стилизовать ::before псевдо таким образом:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

Вот скрипка

Answer 5

Просто установите display как block, и оно будет работать.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Answer 6

Вот еще одна возможность, которая зависит от: first-child, которая доступна не во всех браузерах:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Answer 7

Из всех приведенных выше ответов только ответы djenson47 сохраняют разделение представления и содержания . Недостатком метода свернутой границы является то, что вы больше не можете использовать атрибуты таблицы border или cellspacing для разделения отдельных ячеек. Вы можете утверждать, что это хорошо, и есть некоторые обходные пути, но это может быть боль. Поэтому я считаю, что метод first-child является наиболее элегантным.

В качестве альтернативы, вы также можете установить свойству overflow класса TBODY любое другое значение, кроме "visible". Этот метод также позволяет сохранить модель с разделенными границами:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Answer 8

Поскольку к TD можно применять отступы, вы можете сделать трюк со знаком +. Тогда будет возможно дать верхний отступ для TD первого TR тела:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

Я добавил "tbody + tbody", чтобы у первого tbody не было верхнего отступа. Однако это не обязательно.

Насколько я знаю, недостатков нет :), хотя старые браузеры не тестировались.

Answer 9

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

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

Answer 10

Наткнулся на это, пытаясь решить сам. Я успешно поместил тег <br> прямо перед закрывающим тегом </tbody>. Это чисто визуальное исправление, но, похоже, оно работает на большинстве протестированных мною браузеров.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Также должно быть доступно.