Question

<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内部如何不受影响。解决方案是什么？ Table Row Padding Issue

Answer 1

诀窍是在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;       
}

Answer 2

在CSS 1和CSS 2规范中，填充适用于所有元素，包括<tr>。然而，在CSS 2.1和CSS 3规范中删除了对表格行（<tr>）的填充的支持。我从来没有找到这个恼人的更改背后的原因，这也会影响margin属性和一些其他表元素（页眉，页脚和列）。

更新：2015年2月，www-style@w3c.org邮件列表中的this thread讨论了如何为表格行添加填充和边框支持。这会将标准框模型也应用于表行和表列元素。它将允许such examples。该线程似乎表明CSS标准中从未存在表行填充支持，因为它将具有复杂的布局引擎。在2014年9月30日的Editor's Draft CSS基本框模型中，所有元素都存在填充和边框属性，包括表行和表列元素。如果它最终成为W3C推荐，那么您的html + css示例最终可能会在浏览器中按预期工作。

Answer 3

给出td填充

Answer 4

选项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;
}

Answer 5

这是一篇非常古老的帖子，但我想我应该发布我最近遇到的类似问题的解决方案。

回答：我通过将 tr 元素显示为块元素来解决此问题，即指定 display：CSS的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.

Answer 6

只需将以下代码写入CSS文件

td{
  padding: 10px;
{

Answer 7

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

table {
    border-spacing: 15px;
}

Answer 8

添加一个before元素：

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

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

填充表格行

8 个答案: