Html 如何在 TBODY 元素之间放置间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/294885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put spacing between TBODY elements
提问by nickf
I have a table like this:
我有一张这样的表：
<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>
I'd like to put some spacing between each tbody element, but padding and margin have no effect. Any ideas?
我想在每个 tbody 元素之间放置一些间距，但填充和边距没有效果。有任何想法吗？
采纳答案by Dave Jensen
Try this, if you don't mind not having borders.
试试这个，如果你不介意没有边界。
<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>
回答by MacNimble
Something like this will work, depending on your browser support requirements:
像这样的事情会起作用，具体取决于您的浏览器支持要求：
tbody::before
{
content: '';
display: block;
height: 15px;
}
回答by kevtrout
People will always have controversial opinions about using empty table elements to layout a page (as evidenced by this answer's downvote). I recognize this, but sometimes its easier to use them this way when you are working in a "quick and dirty" way.
人们对使用空表格元素来布局页面总是有争议的意见（正如这个答案的反对票所证明的那样）。我承认这一点，但有时当您以“快速而肮脏”的方式工作时，以这种方式使用它们会更容易。
I've used empty rows in past projects to space groups of table rows. I assigned the spacer rows a css class of their own and defined a height for that class that acted as a top and bottom margin for that group of table rows.
我在过去的项目中使用空行来分隔表格行的空间组。我为间隔行分配了一个它们自己的 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>
If you don't have borders on your table cells,you could also define a height to your typical cell or row in your style sheet that evenly spaces out all rows of your table.
如果表格单元格上没有边框，您还可以定义典型单元格或样式表中的行的高度，以均匀隔开表格的所有行。
tr{
height: 40px;
}
回答by Nineoclick
I had been in trouble spacing properly multiple <tbody>with ::beforepseudo, in presence of <tr>containing <td>with rowspan in a couple of browsers.
在几个浏览器中存在包含rowspan 的情况下，我一直在<tbody>使用::before伪正确间隔多个。<tr><td>
Basically, if you have a <tbody>structured like this:
基本上，如果你有这样的<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>
And you follow who advises to write css on ::beforepseudo element like this:
并且您遵循谁建议在这样的::before伪元素上编写 css ：
tbody::before
{
content: '';
display: block;
height: 10px;
}
This will affect the rowspan, making table "losing" within the second <tr>how many <td>-rowspan are present in the first one.
这将影响行跨度，使表在第二个中“丢失”第一个中存在<tr>多少<td>-rowspan。
So, if anyone encounters that type of problem, the solution is to style ::beforepseudo in this way:
因此，如果有人遇到这种类型的问题，解决方案是以::before这种方式设置伪样式：
tbody::before
{
content: '';
display: table-row;
height: 10px;
}
Here's a fiddle
这是一把小提琴
回答by Dave Jensen
Here's another possibility that relies on :first-child which is not available in all browsers:
这是依赖于 :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>
回答by user007
Just set displayas blockand it will work.
只需设置display为block，它就会工作。
table tbody{
display:block;
margin-bottom:10px;
border-radius: 5px;
}
回答by Maarten
Because padding can be applied to TD's, you can do a trick with the + sign. Then it will be possible to give a top padding to the TD's of the first TR of a tbody:
因为填充可以应用于 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;
}
I have added the "tbody + tbody" so the first tbody won't have a top padding. However, it's not required.
我添加了“tbody + tbody”，所以第一个 tbody 不会有顶部填充。但是，这不是必需的。
As far as I know there are no drawbacks :), though didn't test the older browsers.
据我所知没有缺点:)，虽然没有测试旧的浏览器。
回答by Calvin
Of all of the answers given above, only djenson47's answers retain separation of presentation and content. The drawback of the collapsed border modelmethod is that you can no longer use the table's borderor cellspacingattributes to separate the individual cells. You could argue that this is a good thing, and there are some workarounds, but it can be a pain. So I think the first-childmethod is the most elegant.
在上面给出的所有答案中，只有 djenson47 的答案保留了演示和内容的分离。折叠边框模型方法的缺点是您不能再使用表格的边框或单元格间距属性来分隔单个单元格。您可能会争辩说这是一件好事，并且有一些解决方法，但这可能会很痛苦。所以我认为第一个孩子的方法是最优雅的。
Alternatively, you could also set your TBODY class' overflowproperty to anything other than "visible." This method allows you to retain a separated borders model as well:
或者，您也可以将 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>
回答by OdraEncoded
You can use border-spacingin a table with table row groups to add a space between those groups. Though, I don't think there is a way to specify which groups are spaced and which are not.
您可以border-spacing在带有表格行组的表格中使用以在这些组之间添加空格。虽然，我认为没有办法指定哪些组是间隔的，哪些不是。
<table>
<thead>
...
</head>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
CSS
CSS
table {
border-spacing: 0px 10px; /* h-spacing v-spacing */
}
回答by Jereme Guenther
djensen47 answer works great for newer browsers, however, as it was pointed out, IE7 it does not work in.
djensen47 答案适用于较新的浏览器，但是，正如有人指出的那样，它在 IE7 中不起作用。
My workaround for this issue to support the older browsers was to wrap each cells contents inside a div. Then add a margin-top to the div.
我解决这个问题以支持旧浏览器的方法是将每个单元格内容包装在一个 div 中。然后在div中添加一个margin-top。
<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>
CSS
CSS
.tbl tr td div {
height:30px;
margin-top:20px;
}
The height setting keeps the cells at least 30px high to prevent any cell coloring used inside the div from collapsing around the text. The margin-top creates the desired space by making the entire row taller.
高度设置使单元格至少保持 30 像素高，以防止 div 内使用的任何单元格颜色在文本周围折叠。margin-top 通过使整行更高来创建所需的空间。
