Question

这更像是“告诉我它为什么不起作用”而不是“帮助我修复它”的问题。如果我尝试将填充应用于表中的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>

注意thead上的10px填充。

table {
    width: 100%;
}

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

http://jsfiddle.net/5VQB7/

Answer 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

Answer 2

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

thead th {
  padding: 10px;
}

Answer 3

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

Answer 4

CSS2.1的相关部分： Tables

请查看此图表：table layers。 padding只能作为一个整体应用于table，或仅适用于th和td个细胞。不要忘记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模式下做的那样，哦讽刺...... ）< / p>

Answer 5

划桨左边＆amp;权利总是适用于td或th。

但是，如果是padding-top＆amp; padding-bottom，你要求td（或th）增加它的高度。然后兄弟姐妹呢？你期望发生什么？

因此，为了使填充顶部或底部起作用，您可以应用它的父级，即父级单元格。

Answer 6

因为标签喜欢它们并不意味着填充表格，而是包含其他元素。让我们说清楚：如果你想在你的表中添加标题，你不会插入它，而是你将它添加到里面，并且相同的，如果你想在表中填充数据，你需要将它们插入到里面

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

Answer 7

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

很遗憾，thead，tbody或tr都无法使用填充。

尽管如此，通过选择表主体第一行的数据单元格，可以在thead和tbody之间进行更多填充：

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

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

为什么不对表元素应用填充？

7 个答案:

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

为什么不对表元素应用填充？

7 个答案:

在thead和tbody之间填充

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