如何在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;
}
对于使用空表格元素来布置页面，人们总是会有争议的观点（正如这个答案的downvote所证明的）。 我认识到这一点，但有时当你以“ 快速和肮脏 ”的方式工作时，更容易以这种方式使用它们。
我在过去的项目中使用空行来间隔表格行组。 我给spacer行分配了一个自己的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;
}