填充表格行答案

【问题标题】：Padding a table row填充表格行
【发布时间】：2011-04-09 01:39:04
【问题描述】：

<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 是如何不受影响的。解决方案是什么？

【问题讨论】：

使用<div> 和<p> 代替表格
呈现的数据是表格的，应该在表格中

标签： html css html-table row padding

【解决方案1】：

诀窍是在 td 元素上进行填充，但要为第一个元素设置一个例外（是的，这很 hacky，但有时您必须遵守浏览器的规则）：

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

First-child 支持比较好：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;       
}

【讨论】：

我会使用 :not 运算符来排除单个项目。像 tr:not(#first_row)
@CengizFrostclaw 确实，那会更简洁。但是支持不是很好。
哦，你可能是对的。我不知道，相信 :not 操作符是一个更受支持的操作符是有道理的，但同样，我只在 Chrome 中测试 :D
这不是“hacky”，这正是这些选择器的设计目的
@AdamLeggett 添加非语义 html 始终是最后的手段。您可以使用 :dir(rtl) 伪类来调整 rtl 内容的规则（我会将其添加到答案中，但我实际上并未对此进行测试）

【解决方案2】：

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

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

【讨论】：

我也会对原因很感兴趣！

【解决方案3】：

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

【讨论】：

这应该是基于问题的公认答案。向列 (td) 添加填充并不总是直截了当（也可能是标题 (th)）。这更准确地回答了这个问题。假设通常是 OP 可以修改 HTM，但视觉构建器和 CMS 具有如此突出的地位，通常情况并非如此。赞成
还有一件事。我认为更好的是border-collapse: collapse 而不是inherit

【解决方案4】：

给 td 填充

【讨论】：

唯一的问题是如果 tr 中有 2 td，那么 2 td 之间会有填充，这是我不想要的。

【解决方案5】：

添加前元素：

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

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

【讨论】：

【解决方案6】：

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

table {
    border-spacing: 15px;
}

【讨论】：

【解决方案7】：

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

Answer ：我通过将 tr 元素显示为 block 元素（即指定 display:block 的 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.

【讨论】：

这完全搞砸了表格布局通常的工作方式。如果您这样做，则不应使用表格 - 使用常规 div。