Padding a table row

<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? Table Row Padding Issue

299349 次浏览
小开

给 TD 填充物

小开
最佳答案

诀窍是在 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和 CSS3规范中已经删除了对表行(<tr>)填充的支持。我从来没有找到这个恼人的变化背后的原因，也影响边距属性和其他一些表元素(页眉，页脚和列)。

更新: 在2015年2月，www-style@w3c.org邮件列表中的 这根线讨论了增加对表格行的填充和边框的支持。这也将标准框模型应用于表行和表列元素。它将允许 例子。该线程似乎表明，表行填充支持从未存在于 CSS 标准中，因为它将有复杂的布局引擎。在2014年9月30日的 CSS 基本框模型 编辑草稿中，所有元素(包括 table-row 和 table-column 元素)都有填充和边框属性。如果它最终成为一个 W3C推荐标准，你的 html + css 示例最终可以在浏览器中正常工作。

小开

这是一个非常老的帖子，但是我想我应该把我最近遇到的一个类似问题的解决方案贴出来。

答案 : 我通过将 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.

小开

选择一

还可以通过向行(tr)添加透明边框来解决这个问题，如下所示

超文本标示语言

<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>

CSS

tr {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}

非常有效，不过如果你需要规则的边框，那么这种方法将不会起作用。

选择二

由于行是对单元格进行分组的一种方式，因此正确的方法是使用

table {
border-collapse: inherit;
border-spacing: 0 10px;
}
小开

您可以简单地将此样式添加到表中。

table {
border-spacing: 15px;
}
小开

添加 before 元素:

tr::before {
content: "";
margin-left: 10px;
}

在“响应式”表格(即 td {display: table-row; })的上下文中，这对我来说很重要


提交答案