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

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

<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, но отступы и поля не действуют. Любые идеи?

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

<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>

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

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

}

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

В прошлых проектах я использовал пустые строки для разделения групп строк таблицы. Я назначил промежуточным строкам собственный класс 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;
}

Я был в беде расстояние между правильно множественным <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;
}

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

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

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

Вот скрипка

Вот еще одна возможность, которая зависит от: 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>

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

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

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

В качестве альтернативы вы также можете установить свойство переполнения вашего класса 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>

Поскольку отступы можно применять к 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», чтобы у первого тела не было верхнего отступа. Однако это не обязательно.

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

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

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

CSS

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

НОВЫЙ ОТВЕТ

Вы можете использовать столько <tbody>тегов, сколько захотите. До сих пор я не понимал, что W3C устраивает. Не хочу сказать, что мое нижеприведенное решение не работает (оно работает), но чтобы сделать то, что вы пытаетесь сделать, назначьте <tbody>классы своих тегов, а затем ссылайтесь на их отдельные <td>теги через CSS следующим образом:

table tbody.yourClass td {
    padding: 10px;
}

и ваш HTML таким образом:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Попробуйте этого парня :)

СТАРЫЙ ОТВЕТ

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

у вас не должно быть более одного элемента tbody в вашей таблице. что вы можете сделать, так это установить атрибут class или id в своих <tr>элементах и указать соответствующие им <td>теги заполнения:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Вы даже можете назначить <tr>дополнительный класс top и bottom, чтобы они выполняли только верхний или нижний отступ соответственно:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

и в вашем HTML ваш <tr>тег будет выглядеть так:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

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

Ответ djensen47 отлично подходит для новых браузеров, однако, как было указано, в IE7 он не работает.

Мое решение этой проблемы для поддержки старых браузеров заключалось в том, чтобы обернуть содержимое каждой ячейки в div. Затем добавьте верхний край к div.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

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

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

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

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

С благодарностью всем, кто ответил первым ...

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>