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

我有这样一张桌子：

footer

Body 1

Body 1

Body 1

Body 2

Body 2

Body 2

Body 3

Body 3

Body 3

我想在每个tbody元素之间加一些间距，但填充和边距没有影响。 有任何想法吗？

nickf asked 2019-04-14T13:54:04Z

11个解决方案

66 votes

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

tbody::before

{

content: '';

display: block;

height: 15px;

}

MacNimble answered 2019-04-14T13:54:46Z

47 votes

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

table {

border-collapse: collapse;

}

table tbody {

border-top: 15px solid white;

}

footer

Body 1

Body 1

Body 1

Body 2

Body 2

Body 2

Body 3

Body 3

Body 3

Dave Jensen answered 2019-04-14T13:54:15Z

16 votes

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

我在过去的项目中使用了空行来表空间表行。 我为间隔行分配了一个自己的css类，并为该类定义了一个高度，该高度充当该组表行的顶部和底部边距。

.separator{

height: 50px;

}

Cell 1	Cell 2
Cell 1	Cell 2
Cell 1	Cell 2
Cell 1	Cell 2
Cell 1	Cell 2
Cell 1	Cell 2

tr>

Cell 1Cell 2Cell 1Cell 2Cell 1Cell 2

如果表格单元格上没有边框，则还可以为样式表中的典型单元格或行定义高度，以均匀地分隔表格的所有行。

tr{

height: 40px;

}

kevtrout answered 2019-04-14T13:55:30Z

7 votes

我一直遇到麻烦间隔正确多个::before与

伪，存在，包含，在几个浏览器中有rowspan。

基本上，如果您的::before结构如下：

td 1td 2td 3td 4td 1td 2td 4

你跟随谁建议在::before这样的伪元素上写css：

tbody::before

{

content: '';

display: block;

height: 10px;

}

这将影响rowspan，使表“丢失”在第二个::before中，第一个中存在多少

-rowspan。

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

tbody::before

{

content: '';

display: table-row;

height: 10px;

}

这是一个小提琴

Nineoclick answered 2019-04-14T13:56:40Z

6 votes

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

table {

border-collapse: collapse;

}

td {

border: 1px solid black;

}

tbody tr:first-child td {

padding-top: 15px;

}

footer

Body 1

Body 1

Body 1

Body 2

Body 2

Body 2

Body 3

Body 3

Body 3

Dave Jensen answered 2019-04-14T13:57:08Z

6 votes

只需将display设置为block即可。

table tbody{

display:block;

margin-bottom:10px;

border-radius: 5px;

}

user007 answered 2019-04-14T13:57:38Z

3 votes

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

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

tbody {

overflow: auto;

border-top: 1px solid transparent;

}

footer

Body 1

Body 1

Body 1

Body 2

Body 2

Body 2

Body 3

Body 3

Body 3

Calvin answered 2019-04-14T13:58:18Z

3 votes

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

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

Maarten answered 2019-04-14T13:59:08Z

1 votes

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

...

...

...

...

CSS

table {

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

}

OdraEncoded answered 2019-04-14T13:59:42Z

0 votes

新的答案

您可以根据需要使用尽可能多的

标签。 到目前为止，我没有意识到W3C没问题。 不是说我的下面的解决方案不起作用(确实如此)，但要做你想做的事情，分配你的标签类，然后通过CSS引用它们各自的标签，如下所示：

table tbody.yourClass td {

padding: 10px;

}

和你的HTML因此：

Text

Text

Text

Text

Text

Text

Text

Text

Text

试试那个人:)

老答复

不管你做什么，不要插入空白行......

你的表中不应该有超过1个tbody元素。 你可以做的是在

元素中设置class或id属性，并给它们相应的标签填充：

table {

border-collapse: collapse;

}

tr.yourClass td {

padding: 10px;

}

您甚至可以分配顶部和底部

的附加类，以便它们分别仅执行顶部或底部填充：

tr.yourClass.topClass td {

padding: 10px 0 0 0;

}

tr.yourClass.bottomClass td {

padding: 0 0 10px 0;

}

在您的HTML中，您的

标记看起来像这样：

Text

Text

Text

Text

Text

Text

Text

Text

Text

希望这可以帮助！

Jason answered 2019-04-14T14:01:28Z

0 votes

djensen47的答案适用于较新的浏览器，但正如有人指出的那样，IE7无法正常工作。

我支持旧浏览器的问题的解决方法是将每个单元格内容包装在div中。 然后在div中添加margin-top。

CSS

.tbl tr td div {

height:30px;

margin-top:20px;

}

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

Jereme Guenther answered 2019-04-14T14:02:17Z