Как установить расстояние между элементами 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, но отступы и маржа не влияют. Любые идеи?

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

}

Ответ 3

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

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

Ответ 4

У меня были проблемы с множественным числом <tbody> с ::before pseudo, в присутствии <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 pseudo следующим образом:

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

Здесь fiddle

Ответ 5

Здесь другая возможность, на которую полагается: 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>

Ответ 6

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

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

Ответ 7

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

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

Ответ 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 не будет верхнего дополнения. Однако это не требуется.

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

Ответ 9

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

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

CSS

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

Ответ 10

НОВЫЙ ОТВЕТ

Вы можете использовать как можно больше тегов <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>

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

OLD ANSWER

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

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

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

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

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>

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

Ответ 11

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

Мое обходное решение этой проблемы для поддержки старых браузеров состояло в том, чтобы обернуть содержимое каждой ячейки внутри div. Затем добавьте margin-top в 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, вокруг текста. Верхний край создает желаемое пространство, делая всю строку выше.

Ответ 12

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

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

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