为什么不对表元素应用填充？ [英] Why isn't padding applied to table elements?

问题描述

这更像是一个告诉我为什么它不工作，而不是帮我解决问题。如果我尝试应用填充到表中的一个.ad或tr元素，它不工作。填充的唯一方式是如果我直接应用到th或td元素。为什么会这样？有一个简单的方法来应用填充到整个thead或tr或添加到th和td唯一的选择吗？

This is more of a "tell me why it doesn't work" instead of "help me fix it" question. If I try to apply padding to a thead or tr element within a table, it doesn't work. The only way padding works is if I apply it directly to the th or td element. Why is this so? Is there an easy way to apply padding to the entire thead or tr or is adding it to the th and td the only option?

<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填充。

Notice the 10px of padding on the thead.

table {
    width: 100%;
}

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

http://jsfiddle.net/5VQB7/

推荐答案

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

'padding'

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

Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

这篇关于为什么不对表元素应用填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！