<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>
这是填充的样子。了解td内部如何不受影响。解决方案是什么？
诀窍是在td元素上给出填充，但是为第一个做一个例外（是的，它是hacky，但有时你必须遵循浏览器的规则）：
td {
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
}
td:first-child {
padding-left:20px;
padding-right:0;
}
第一个孩子得到了相对较好的支持：https://developer.mozilla.org/en-US/docs/CSS/:first-child
您可以使用tr:first-child td对水平填充使用相同的推理。
或者，使用the not operator排除第一列。但是，对此的支持并不是那么好。
td:not(:first-child) {
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
}
在CSS 1和CSS 2规格中，填充物适用于包括<tr>在内的所有元素。然而，在<tr>和CSS 2.1规范中已经删除了对表行（CSS 3）填充的支持。我从来没有找到这个恼人的更改背后的原因，这也会影响margin属性和一些其他表元素（页眉，页脚和列）。
更新：2015年2月，this thread邮件列表中的[email protected]讨论了如何为表格行添加填充和边框支持。这会将标准框模型也应用于表行和表列元素。这将允许such examples。该线程似乎表明CSS标准中从未存在表行填充支持，因为它将具有复杂的布局引擎。在2014年9月30日的CSS基本框模型的Editor's Draft中，所有元素都存在填充和边框属性，包括表行和表列元素。如果它最终成为W3C推荐，那么您的html + css示例最终可能会在浏览器中按预期工作。
给td填充
选项1
你也可以通过向行（tr）添加透明边框来解决它，就像这样
HTML
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
CSS
tr {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
像魅力一样工作，虽然如果你需要规则的边框，那么这种方法很遗憾不起作用。
选项2
由于行充当了对单元格进行分组的方法，因此使用正确的方法
table {
border-collapse: inherit;
border-spacing: 0 10px;
}
这是一篇非常古老的帖子，但我想我应该发布我最近遇到的类似问题的解决方案。
答：我通过将tr元素显示为块元素来解决这个问题，即为tr元素指定display：block的CSS。您可以在下面的代码示例中看到这一点。
<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.您只需将此样式添加到表中即可。
table {
border-spacing: 15px;
}