如何在TBODY元素之间放置间距

时间：2008-11-17 04:29:48

标签： html css

我有一张这样的表：

<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元素之间加一些间距，但填充和边距没有影响。有什么想法吗？

13 个答案:

答案 0 :(得分：71)

这样的东西会起作用，具体取决于您的浏览器支持要求：

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

}

答案 1 :(得分：50)

如果你不介意没有边框，试试这个。

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

答案 2 :(得分：17)

对于使用空表元素来布局页面，人们总是会有争议的意见（正如这个答案的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;
}

答案 3 :(得分：7)

我在使用<tbody>伪::before与<tr>包含<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> 结构如下：

::before

你跟随谁建议在这样的tbody::before { content: ''; display: block; height: 10px; } 伪元素上写css：

<tr>

这将影响行数，使表格失去＆＃34;在第二个<td>内，在第一个::before中有多少tbody::before { content: ''; display: table-row; height: 10px; } - rowspan。

因此，如果遇到任何类型的问题，解决方案是以这种方式设置hadoop fs -ls /tmp/pig*伪样式：

public void ClickedButton (object sender, EventArgs e)
{
    var btn = sender as Button;
    if ((btn != null) && btn.BackColor == System.Drawing.SystemColors.Control)) {
        btn.BackColor = Color.Turquoise;
    }
}

这里是fiddle

答案 4 :(得分：6)

这是另一种依赖的可能性：所有浏览器都没有的第一个孩子：

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

答案 5 :(得分：6)

只需将display设为block即可。

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

答案 6 :(得分：4)

在上面给出的所有答案中，只有djenson47的答案保留separation of presentation and content。 折叠边框模型方法的缺点是您无法再使用表格的 border 或 cellspacing 属性来分隔各个单元格。你可以说这是一件好事，并且有一些解决方法，但它可能是一种痛苦。所以我认为 first-child 方法是最优雅的。

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

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

答案 7 :(得分：3)

因为填充可以应用于TD，所以你可以使用+符号进行操作。然后，可以给出t的第一个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将没有顶部填充。但是，这不是必需的。

据我所知，没有任何缺点:)，虽然没有测试旧的浏览器。

答案 8 :(得分：1)

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

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

CSS 

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

答案 9 :(得分：0)

NEW ANSWER

您可以根据需要使用尽可能多的<tbody>代码。到目前为止，我没有意识到W3C没问题。不是说我的下面的解决方案不起作用（确实如此），但要做你想做的事情，分配你的<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>

试试那个人：）

OLD ANSWER

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

你的表中不应该有超过1个tbody元素。您可以做的是在<tr>元素中设置class或id属性，并为其提供相应的<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>

希望这有帮助！

答案 10 :(得分：0)

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

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

答案 11 :(得分：0)

请尝试自己解决此问题，我成功地将<br>标记放在结束</tbody>标记之前。这是一个纯粹的视觉修复，但似乎可以在我测试过的大多数浏览器上使用。

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

也应该可以访问。

答案 12 :(得分：0)

对所有首先回答的人表示赞赏... 

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>

相关问题
最新问题