填充表格行

Question 1

<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如何不受影响。有什么解决方案？表格行填充问题

Question 2

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

Question 3

在CSS 1和CSS 2规范中，填充可用于所有元素，包括<tr>。但是<tr>在CSS 2.1和CSS 3规范中已经删除了对table-row（）的填充支持。我从未发现这一令人讨厌的更改背后的原因，该更改还会影响边距属性和其他一些表元素（页眉，页脚和列）。

更新：2015年2月，邮件列表上的该线程www-style@w3c.org讨论了有关为表格行添加填充和边框支持的问题。这将标准框模型也应用于表格行和表格列元素。这将允许这样的例子。该线程似乎暗示CSS标准中不存在表行填充支持，因为它将具有复杂的布局引擎。在2014年9月30日的编辑草稿中的CSS基本框模型中，所有元素（包括table-row和table-column元素）都具有填充和边框属性。如果最终成为W3C推荐，那么您的html + css示例最终可能会在浏览器中按预期工作。

Question 4

给TD填充

Question 5

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

Question 6

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

答：我通过显示解决这个问题TR元素作为一个块，即指定的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.

展开摘要

Question 7

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

table {
    border-spacing: 15px;
}