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

95

我有一张这样的桌子：

<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元素之间留一些间距，但是padding和margin无效。有任何想法吗？

html  css 
— 尼克
source
重复“ tbody”标签是否正确？我一直看到的是所有“ <tr> .. </ tr>”都在一个“ tbody”标签内
— 。– Saneef
23
是的，这是有效的。规范说：<！ELEMENT TABLE--（CAPTION ?,（COL * | COLGROUP *），THEAD ?, TFOOT ?, TBODY +）>意味着必须有一个或多个躯干。 w3.org/TR/html4/struct/tables.html#h-11.2.1
— 尼克

Answers:

56

如果您不介意没有边框，请尝试此操作。

<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>
— 戴夫·詹森
source
7
尝试border-top：15px纯透明；
— 史蒂夫·杏仁
3
想强调一下。使用transparent的边框颜色。@SteveAlmond说了什么。
— iheartcsharp
如果table / tbody / tr / td具有背景色，则将边框颜色设置为transparent会为其赋予元素的背景色，这与元素的主体本质上是无法区分的。您需要为边框显色，以使其想要的颜色显示（以使其看起来不可见）
— Guy Passy
81

取决于您的浏览器支持要求，类似这样的方法将起作用：

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

}
— 麦克尼布尔
source
1
当您的单元格具有空间不应该具有的背景时，这是唯一可行的解​​决方案。
— 拉拉达（Laradda）2012年
这对我来说很好。有什么缺点吗？另外，为什么要加上两个冒号？
— nh2 2013年
很好的解决方案。保持一切方便！
— 詹森·费瑟辛汉
1
@ nh2：双冒号用于伪内容，单冒号用于伪选择器。这是CSS语法的更新。以前所有的东西都只使用单个冒号。较旧的浏览器不支持双冒号（例如IE <= 8）。
— dbmikus 2015年
3
使用起来不安全display: table-row;吗？
— 瑞秋2015年
20

人们总是对使用空表元素来布局页面有争议的观点（此答案的不足证明了这一点）。我认识到这一点，但是当您以“ 快速而肮脏 ”的方式工作时，有时更容易以这种方式使用它们。

我在过去的项目中使用空行来间隔表行的组。我给间隔行分配了一个自己的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;
}
— 凯夫特鲁特
source
好吧，如果您要添加额外的标记，为什么不将类放在每个体的第一行呢？
— 尼克
好吧，这可能是因为这些行是生成的代码，并且在标记中添加单独的行可能比为生成的内容的第一行创建特殊情况更容易维护。
— 罗尔夫·兰德
12
对所有想要的东西进行否决，但这是唯一没有缺点的解决方案-即使它确实违反了分隔，但空行并不是IMO的大问题。
— Xkeeper 2011年
11
没有缺点，我的屁股！尝试对此使用屏幕阅读器，并注意不正确的行数。更好的是，尝试将表格复制并粘贴到电子表格中。如果内容很多，将需要重新格式化几个小时。表旨在显示数据（并且非常易于访问），而不是各部分之间的填充表示。
— 詹森·
这只是视觉上的。请记住，html也是可以处理的文档，因此其中的内容应格式正确。如上所述，复制粘贴表或使用屏幕阅读器将失败。这样的设计不应该被鼓励。:: content解决方案更好，因为它不会弄乱标记。
— pawel-kuznik 2014年
12

在使用多个浏览器包含rowspan的情况下，我一直在<tbody>用::before伪伪适当地将倍数分隔开。<tr><td>

基本上，如果您具有这样的<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>行。

因此，如果有人遇到这种类型的问题，解决方案是使用以下方式设置::before伪样式：

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

这是一个小提琴

— Nineoclick
source
6

这是另一种可能的依赖：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>
— 戴夫·詹森
source
3
如果您碰巧依赖于内容相对于单元格大小的位置的东西（例如框阴影，背景图像或几乎其他任何东西），则此选项将无法很好地工作。
— Xkeeper 2011年
1
只是为了澄清其他人在Google上找到的答案，我想这是写于2008年，现在（2015年）这个答案在所有主要浏览器中都提供全面支持？至少在caniuse.com上检查第一个孩子似乎得到了很好的支持？
— redfox05 2015年
6

只要设置display为block，它将起作用。

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}
— user007
source
1
此答案应为可接受的答案，因为它是唯一允许使用带有“无边界”列的带边框的花体的答案。
— robsonrosa 2015年
13
display:block中断tbody元素之间的列对齐方式。您不再从表格布局引擎中受益
— M Conrad
4

在上面给出的所有答案中，只有djenson47的答案保留表示和内容的分离。折叠边框模型方法的缺点是您不能再使用表格的border或cellpacing属性来分隔单个单元格。您可能会说这是一件好事，有一些解决方法，但这可能会很痛苦。因此，我认为第一个孩子的方法是最优雅的。

另外，您还可以将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>
— 加尔文
source
我一直想做类似的事情，这对我来说很完美
— Eruant 2012年
4

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

据我所知，虽然没有测试较旧的浏览器，但也没有缺点：)。

— 马尔滕
source
2

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

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

的CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}
— Odra编码
source
0

新答案

您可以根据需要使用任意多个<tbody>标签。直到现在，我才意识到W3C可以接受。并不是说我下面的解决方案不起作用（它确实可以），但是要做您想做的事情，分配<tbody>标签类，然后<td>通过CSS 引用它们的各个标签，如下所示：

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>

试试那个家伙:)

老答案

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

您的表格中不应包含超过1个tbody元素。您可以做的是在<tr>元素中设置class或id属性，并为其<td>填充相应的标签：

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

您甚至可以为top和bottom分配<tr>一个附加类，以便它们分别仅执行top或bottom填充：

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>

希望这可以帮助！

— 杰森
source
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内部使用的任何单元格颜色在文本周围折叠。顶部边缘通过使整行更高来创建所需的空间。

— 杰勒米·冈瑟
source
0

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

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

也应该可以访问。

— 伊恩
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.