Як поставити інтервал між елементами 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>з рядком рядків у декількох браузерах.

В основному, якщо у вас така <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>-rowws наявна в першій.

Отже, якщо хтось стикається з такою проблемою, рішення полягає в стилі ::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 на будь-що інше, ніж "видимий". Цей метод дозволяє також зберегти модель розділених меж:

<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>додатковий клас, щоб вони виконували лише верхнє або нижнє заповнення відповідно:

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>

Також має бути доступним.