如何在TBODY元素之间放置间距
如何在TBODY元素之间放置间距
提问于 2008-11-17 04:29:48
我有一张这样的桌子：
<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元素之间留出一些间距，但是填充和边距不起作用。有什么想法吗？
回答 11
Stack Overflow用户
回答已采纳
发布于 2008-11-17 04:31:37
试试这个，如果你不介意没有边框的话。
<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>Stack Overflow用户
发布于 2012-05-26 08:03:18
根据您的浏览器支持要求，类似以下内容将会起作用：
tbody::before
{
content: '';
display: block;
height: 15px;
}Stack Overflow用户
发布于 2015-09-15 21:06:08
在几个浏览器中，当<tr>包含带had跨度的<td>时，我遇到了使用had正确分隔多个<tbody>的问题。
基本上，如果你有一个像这样结构的<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>您可以关注建议在::before伪元素上编写css的人，如下所示：
tbody::before
{
content: '';
display: block;
height: 10px;
}这将影响行跨度，使表在第二个<tr>中“丢失”第一个中存在的多少个<td>-rowspan。
因此，如果有人遇到这种类型的问题，解决方案是以这种方式设置::before伪样式：
tbody::before
{
content: '';
display: table-row;
height: 10px;
}这是一个fiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/294885
复制相关文章
相似问题
腾讯云开发者
