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

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

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

}

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

у меня были проблемы с интервалом правильно несколько <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>-свойство rowspan являются присутствует в первом из них.

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

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

здесь скрипка

вот еще одна возможность, которая опирается на: первый ребенок, который не доступен во всех браузерах:

<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 сохраняют разделение представления и содержимого. Недостаток свернутая модель границы метод заключается в том, что вы больше не можете использовать таблицы границы или cellspacing атрибуты для разделения на отдельные ячейки. Вы можете возразить, что это хорошая вещь, и есть некоторые обходные пути, но это может быть боль. Так что я думаю первый-ребенок метод является наиболее элегантный.

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

<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", поэтому первое 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>

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

ОТВЕТ

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

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

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

вы даже можете назначить верхнюю и нижнюю <tr> ' s дополнительный класс, так что они делают только верхнюю или нижнюю прокладку, соответственно:

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

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