如何在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所certificate的）。 我认识到这一点，但有时候，当你以“ 快速和肮脏 ”的方式工作时，更容易使用它们。
我在过去的项目中使用了空行来空间表行组。 我给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; }
这是另外一种可能性，依赖于：在所有浏览器中都不可用的第一个孩子：
<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; }
在包含带有rowspan的<tr>的<tr>存在于几个浏览器的情况下，我一直无法正确地在多个<tbody>使用::before伪。
基本上，如果你有一个<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>
你遵循谁build议在::before伪元素编写CSS：
tbody::before { content: ''; display: block; height: 10px; }
这将影响行跨度，使第二个<tr>表中的表“丢失”在第一个中存在多less个。
所以，如果有人遇到这种types的问题，解决方法是在这样的方式::before风格::before伪：
tbody::before { content: ''; display: table-row; height: 10px; }
这是一个小提琴
因为填充可以应用于TD，所以你可以用+号做一个技巧。 那么就有可能给一个tbody的第一个TR的TD的顶部填充：
// 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不会有顶部填充。 但是，这不是必需的。
据我所知，没有缺点:)，虽然没有testing旧的浏览器。
在上面给出的所有答案中，只有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>
新的答案
您可以使用任意数量的<tbody>标签。 到目前为止，W3C还没有意识到这一点。 不是说我的下面的解决scheme不工作（它），但要做你想做的事情，分配你的<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>
试试这个家伙:)
老解答
不pipe你做什么，不要插入空行
你的桌子上不应该有超过一个的tbody元素。 你可以做的是在你的<tr>元素中设置class或id属性，并给它们相应的<td>标签padding：
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>
希望这可以帮助！
您可以在具有表格行组的表格中使用border-spacing来在这些组之间添加空格。 虽然，我不认为有办法指定哪些组间隔，哪些不是。
<table> <thead> ... </head> <tbody> ... </tbody> <tbody> ... </tbody> <tfoot> ... </tfoot> </table>
CSS
table { border-spacing: 0px 10px; /* h-spacing v-spacing */ }
djensen47答案很适合新的浏览器，但是，正如它指出的，IE7它不工作。
我的这个问题的解决方法，以支持旧的浏览器是将每个单元格内容包装在一个div。 然后在div上添加一个margin-top。
<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; }
高度设置保持单元格至less30px高，以防止div内使用的任何单元格着色在文本周围折叠。 边缘顶部通过使整个行更高来创build期望的空间。
