18

这更像是一个“告诉我为什么它不起作用”而不是“帮我解决它”的问题。如果我尝试对表格中的 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/

4

7 回答 7

25

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之外的所有元素

于 2013-03-24T06:57:39.513 回答
5

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

thead th {
  padding: 10px;
}
于 2013-03-24T06:54:57.223 回答
4

CSS2.1 的相关部分：表格

请看一下这张图：表层。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 模式下所做的那样，哦具有讽刺意味......）

于 2013-03-24T09:48:26.493 回答
3

thead和之间的填充tbody

不幸的是，填充不适用于thead,tbody也不tr。

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

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

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

于 2020-08-23T10:25:45.867 回答
1

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

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

或者

th {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}
于 2013-03-24T06:54:54.790 回答
0

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

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

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

于 2013-03-24T06:56:35.507 回答
0

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

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

于 2013-03-24T07:01:58.113 回答