填充表格行
<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里面怎么不受影响。 有什么解决scheme？ 
诀窍是在td元素上添加填充，但是对于第一个元素来说是个例外（是的，这很冒险，但有时你必须按照浏览器的规则来玩）：
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对水平填充使用相同的推理。
或者，使用not运算符排除第一列。 但是，对此的支持现在还不够好。
td:not(:first-child) { padding-top:20px; padding-bottom:20px; padding-right:20px; }
在CSS 1和CSS 2规范中，填充可用于所有元素，包括<tr> 。 但是在CSS 2.1和CSS 3规范中已经删除了对表格行（ <tr> ）的填充支持。 我从来没有find这个恼人的变化背后的原因，这也影响到保证金属性和一些其他表格元素（页眉，页脚和列）。
更新：在2015年2月， www-style@w3c.org邮件列表上的这个主题讨论了如何添加对表格行的填充和边框的支持。 这也将标准框模型应用于表行和表列元素。 这将允许这样的例子 。 该线程似乎表明，表格填充支持从来没有存在于CSS标准，因为它会有复杂的布局引擎。 在2014年9月30日CSS基本框模型的编辑草案中，所有元素（包括表格行和表格列元素）都存在填充和边框属性。 如果它最终成为W3C推荐标准，那么您的html + css示例最终可能会在浏览器中按预期工作。
给td填充
这是一个非常古老的post，但我想我应该发表我最近面临的类似问题的解决scheme。
答 ：我通过显示tr元素作为块元素来解决这个问题，即为tr元素指定一个CSS： display：block 。 你可以在下面的代码示例中看到这个。
<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.
里面的<td>弄乱了格式。 尝试删除它。
