Как поставить интервал между элементами 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

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, вокруг текста. Поле margin-top создает желаемое пространство, делая всю строку выше.

Answer 2

НОВЫЙ ОТВЕТ

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

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>

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