如何在 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 元素之间放置一些间距，但 padding 和 margin 没有效果。有任何想法吗？

原文由 nickf 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Dave Jensen 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

根据您的浏览器支持要求，这样的事情会起作用：

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

}

原文由 MacNimble 发布，翻译遵循 CC BY-SA 3.0 许可协议