为什么不将填充应用于表格元素？答案

【问题标题】：Why isn't padding applied to table elements?为什么不将填充应用于表格元素？
【发布时间】：2013-03-24 06:49:12
【问题描述】：

这更像是一个“告诉我为什么它不起作用”而不是“帮我解决它”的问题。如果我尝试将填充应用于表格中的 thead 或 tr 元素，它不起作用。填充工作的唯一方法是如果我将它直接应用于 th 或 td 元素。为什么会这样？有没有一种简单的方法可以将填充应用于整个 thead 或 tr 或者将其添加到 th 和 td 唯一的选项？

<table>
    <thead>
        <tr>
            <th>Destination</th>
            <th>Size</th>
            <th>Home Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test 1</td>
            <td>test 2</td>
            <td>test 3</td>
        </tr>
    </tbody>
</table>

注意头上 10 像素的内边距。

table {
    width: 100%;
}

thead {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}

http://jsfiddle.net/5VQB7/

【问题讨论】：

theads 和 trs 根据定义不能有填充。你希望它是什么样子？
我不太了解这种方法。你最终得到的填充是任何TD 的最大值，而不管其他任何填充，所以你可以在TD 上指定多个不同的填充，这是无稽之谈。在我看来，它似乎更符合逻辑地应用于TR。

标签： html css

【解决方案1】：

http://www.w3.org/TR/CSS2/box.html#propdef-padding

'填充'

适用于： 除 table-row-group、table-header-group、table-footer-group、table-row 之外的所有元素、table-column-group和table-column

【讨论】：

【解决方案2】：

尝试将填充放在th 元素中。通常，您希望根据具体情况为 th 或 td 元素添加填充。

thead th {
  padding: 10px;
}

【讨论】：

【解决方案3】：

CSS2.1 的相关部分：Tables

请看一下这张图：table layers。 padding 只能整体应用于table 或th 和td 单元格afaik。也不要忘记caption。其他层在各种表格布局算法中足够复杂，没有对其应用填充^^

这是一个小提琴http://jsfiddle.net/QB97d/1/，显示了您可以使用的其他属性。

border-spacing: 8px 10px; 就像表格中每个单元格周围的边距。用border-collapse: collapse; 摆脱它
table-layout: fixed; 将触发完全不同的算法（“按照我告诉你的渲染宽度，不再关心每个单元格中内容的相对数量”）
border 是另一种在元素周围留出空间的方式，在 padding 周围
empty-cells: hide 可能会触发特殊行为

此小提琴中未显示：

在 IE9+ 中使用选择器选择表格的 4 个角，每个角有一个 thead 元素和未知类型的单元格（我会让你找到 4 个边；））：
- thead th:first-child, thead td:first-child,
- thead th:last-child, thead td:last-child,
- tbody:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
- tbody:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child
box-sizing: border-box（及其供应商前缀）用于计算单元格宽度并考虑填充和边框宽度（就像 IE6 在 Quirks 模式下所做的那样，哦，讽刺...）

【讨论】：

这种行为可以追溯到 IE5，这是 IE6 和更高版本的 quirks 模式所模拟的。
感谢@BoltClock。有道理，因为 IE6 有 both 模式

【解决方案4】：

`thead` 和 `tbody` 之间的填充

很遗憾，thead、tbody 和 tr 均无法使用填充。

不过，thead 和 tbody 之间的更多填充可以通过选择表体第一行的数据单元格来实现：

tbody tr:first-child td {
    padding-top: 2.5ex;
}

这样做，保留任何标题边框的相对位置。

【讨论】：

【解决方案5】：

thead 不支持 css 属性“padding”，如果您需要在 thead 中应用 css 然后 css 修改如下：

thead tr th {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}

或者

th {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}

【讨论】：

【解决方案6】：

左右划桨总是适用于 td 或 th 。

但是，在 padding-top 和 padding-bottom 的情况下，您要求 td（或 th）增加它的高度。那么兄弟姐妹呢？？你预计会发生什么？

因此，要使用填充顶部或底部，您需要将其应用于单元格行的父级。

【讨论】：

【解决方案7】：

因为标签like and 它们不是用来填充表格的，而是用来包含其他元素的。让我们说清楚：如果您想在表格中添加标题，则不会将其插入，而是将其添加到内部，同样，如果您想在表格中填充数据，则需要将它们插入其中

我希望这个答案能澄清你的问题

【讨论】：

thead 和 tbody 之间的填充

`thead` 和 `tbody` 之间的填充