Html 填充表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3656615/
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
Padding a table row
提问by Spencer
<html>
<head>
<title>Table Row Padding Issue</title>
<style type="text/css">
tr {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<h2>Lorem Ipsum</h2>
<p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse
platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed
tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae
mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus
hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non
scelerisque.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Here's what the padding looks like. See how the td inside isn't affected. What's the solution?
这是填充的样子。看看里面的 td 是如何不受影响的。解决办法是什么？
回答by Joeri Hendrickx
The trick is to give padding on the tdelements, but make an exception for the first (yes, it's hacky, but sometimes you have to play by the browser's rules):
诀窍是对td元素进行填充，但第一个例外（是的，这很hacky，但有时您必须遵守浏览器的规则）：
td {
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
}
td:first-child {
padding-left:20px;
padding-right:0;
}
First-child is relatively well supported: https://developer.mozilla.org/en-US/docs/CSS/:first-child
First-child 的支持相对较好：https: //developer.mozilla.org/en-US/docs/CSS/:first-child
You can use the same reasoning for the horizontal padding by using tr:first-child td.
您可以通过使用对水平填充使用相同的推理tr:first-child td。
Alternatively, exclude the first column by using the notoperator. Support for this is not as good right now, though.
可替代地，通过使用排除第一列的not操作者。不过，目前对此的支持并不好。
td:not(:first-child) {
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
}
回答by Futal
In CSS 1and CSS 2specifications, padding was available for all elements including <tr>. Yet support of padding for table-row (<tr>) has been removed in CSS 2.1and CSS 3specifications. I have never found the reason behind this annoying change which also affect margin property and a few other table elements (header, footer, and columns).
在CSS 1和CSS 2规范中，填充可用于所有元素，包括<tr>. 然而，<tr>在CSS 2.1和CSS 3规范中删除了对 table-row ( )填充的支持。我从来没有找到这个恼人的变化背后的原因，它也会影响边距属性和其他一些表格元素（页眉、页脚和列）。
Update: in Feb 2015, this threadon the [email protected]mailing list discussed about adding support of padding and border for table-row. This would apply the standard box model also to table-row and table-column elements. It would permit such examples. The thread seems to suggest that table-row padding support never existed in CSS standards because it would have complicated layout engines. In the 30 September 2014 Editor's Draftof CSS basic box model, padding and border properties exist for all elements including table-row and table-column elements. If it eventually becomes a W3C recommendation, your html+css example may work as intended in browsers at last.
更新：2015 年 2 月，邮件列表上的这个线程[email protected]讨论了为表格行添加填充和边框的支持。这也将标准框模型应用于表行和表列元素。它会允许这样的例子。该线程似乎表明 CSS 标准中从未存在过 table-row padding 支持，因为它具有复杂的布局引擎。在 2014 年 9 月 30 日的 CSS 基本框模型编辑草案中，所有元素都存在填充和边框属性，包括表行和表列元素。如果它最终成为 W3C 推荐，那么您的 html+css 示例最终可能会在浏览器中按预期工作。
回答by Moin Zaman
give the td padding
给 td 填充
回答by Karl Johan Vallner
Option 1
选项1
You could also solve it by adding a transparent border to the row (tr), like this
您也可以通过向行（tr）添加透明边框来解决它，如下所示
HTML
HTML
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
CSS
CSS
tr {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
Works like a charm, although if you need regular borders, then this method will sadly not work.
像魅力一样工作，但如果您需要常规边框，那么遗憾的是这种方法将不起作用。
Option 2
选项 2
Since rows act as a way to group cells, the correct way to do this, would be to use
由于行是对单元格进行分组的一种方式，因此执行此操作的正确方法是使用
table {
border-collapse: inherit;
border-spacing: 0 10px;
}
回答by Sunil
This is a very old post, but I thought I should post my solution of a similar problem I faced recently.
这是一篇很老的帖子，但我想我应该发布我最近遇到的类似问题的解决方案。
Answer: I solved this issue by displaying the trelement as a blockelement i.e. specifying a CSS of display:blockfor the trelement. You can see this in code sample below.
答：我通过显示解决这个问题TR元素作为一个块，即指定的CSS元素块：显示为TR元素。您可以在下面的代码示例中看到这一点。
<style>
tr {
display: block;
padding-bottom: 20px;
}
table {
border: 1px solid red;
}
</style>
<table>
<tbody>
<tr>
<td>
<h2>Lorem Ipsum</h2>
<p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.回答by Ifesinachi Bryan
You could simply add this style to the table.
您可以简单地将此样式添加到表格中。
table {
border-spacing: 15px;
}
