填充表格行
Spe*_*cer 68 html css row html-table padding
<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内部如何不受影响.解决方案是什么？
Joe*_*ckx 97
诀窍是给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.
可替代地,通过使用排除第一列的not操作者.但是,对此的支持并不是那么好.
td:not(:first-child) {
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
}
- 这不是'hacky',这正是这些选择器的设计目标 (6认同)
- @AdamLeggett 添加非语义 html 始终是最后的手段。您可以使用 `:dir(rtl)` 伪类来调整 rtl 内容的规则（我会将其添加到答案中，但我实际上并未对此进行测试） (2认同)
Fut*_*tal 18
在CSS 1和CSS 2规范中,填充可用于所有元素,包括<tr>.然而,<tr>在CSS 2.1和CSS 3规范中已经删除了对table-row()的填充的支持.我从来没有找到这个恼人的更改背后的原因,这也会影响margin属性和一些其他表元素(页眉,页脚和列).
更新:在2015年2月,这个线程上的www-style@w3c.org邮件列表关于增加对表行靠垫和边界的讨论.这会将标准框模型也应用于表行和表列元素.它会允许这样的例子.该线程似乎表明CSS标准中从未存在表行填充支持,因为它将具有复杂的布局引擎.在2014年9月30日的编辑器 CSS基本框模型草案中,所有元素都存在填充和边框属性,包括表格行和表格列元素.如果它最终成为W3C推荐,那么您的html + css示例最终可能会在浏览器中按预期工作.
- 我也会对原因很感兴趣！ (4认同)
Kar*_*ner 10
选项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;
}