如何在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>

这是另一种依赖于 ：first-child 的可能性，它并非在所有浏览器中都可用：

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

对于使用空表格元素来布局页面，人们总是会有有争议的意见（正如这个答案的反对票所证明的那样）。我认识到这一点，但有时当您以“快速而肮脏”的方式工作时，以这种方式使用它们会更容易。

在过去的项目中，我曾使用空行来间隔表行组。我为间隔行分配了它们自己的 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;
}

在上面给出的所有答案中，只有 djenson47 的答案保留了陈述和内容的分离。折叠边框模型方法的缺点是不能再使用表格的边框或单元格间距属性来分隔各个单元格。你可以争辩说这是一件好事，并且有一些解决方法，但这可能是一种痛苦。所以我认为第一个孩子的方法是最优雅的。

或者，也可以将 TBODY 类的 overflow 属性设置为“visible”以外的任何属性。此方法还允许您保留分隔的边界模型：

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

新答案

您可以根据需要使用任意数量的标签。直到现在，我才意识到 W3C 可以这样做。并不是说我下面的解决方案不起作用（它确实有效），而是要做您要做的事情，请分配您的标签类，然后通过 CSS 引用它们的各个标签，如下所示：<tbody><tbody><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>

试试那个家伙:)

旧答案

无论你做什么，都不要插入空白行......

表中的 tbody 元素不应超过 1 个。您可以做的是在元素中设置 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>

希望这有帮助！

根据您的浏览器支持要求，这样的东西将起作用：

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

}

您可以在具有表行组的表中使用在这些组之间添加空格。不过，我认为没有办法指定哪些组是间隔的，哪些不是。border-spacing

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS的

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

djensen47 answer 适用于较新的浏览器，但是，正如所指出的，它不适用于 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;
}

高度设置使单元格保持至少 30px 高，以防止 div 中使用的任何单元格颜色在文本周围折叠。边距顶部通过使整行更高来创建所需的空间。

只需设置为，它就会起作用。displayblock

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

因为填充可以应用于 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 不会有顶部填充。但是，这不是必需的。

据我所知，:)没有缺点，尽管没有测试较旧的浏览器。

我一直在使用伪选择器跨浏览器支持间隔多个 时遇到麻烦，如果有的话。<tbody>::before<td>rowspan

基本上，如果你的结构是这样的：<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>

...您的伪选择器将内容显示为如下所示：::beforeblock

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

...那么这将导致表切断任何使用 .rowspan

解决方案是将 pseudo 样式设置为：::beforetable-row

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

这应该有良好的跨浏览器支持。

这是一把小提琴

在尝试自己解决时遇到了这个问题。我成功地在结束标签之前放置了一个标签。这是一个纯粹的视觉修复，但似乎适用于我测试的大多数浏览器。<br></tbody>

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

也应该是可访问的。

感谢其他第一个回答的人......

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>