Почему не применяется дополнение к элементам таблицы?

Это скорее "скажи мне, почему это не работает", а не "помогите мне исправить". Если я попытаюсь применить прописку к элементу thead или tr внутри таблицы, это не сработает. Единственный способ работы дополнений - применить его непосредственно к элементу th или td. Почему это так? Есть ли простой способ применить дополнение ко всему теду или 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>

Обратите внимание на 10px отступов на thead.

table {
    width: 100%;
}

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

http://jsfiddle.net/5VQB7/

Ответы

Ответ 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 и столбец

Ответ 2

Попробуйте поместить дополнение в элемент th. Обычно вы хотите добавить дополнение к элементу th или td, в зависимости от обстоятельств.

thead th {
  padding: 10px;
}

Ответ 3

thead не поддерживают атрибут css "padding", если вам нужно применить css в aad, а затем css изменить как:

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

или

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

Ответ 4

Соответствующая часть CSS2.1: Tables

Пожалуйста, посмотрите на эту диаграмму: таблицы слоев. 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 может вызвать специальное поведение

В этой скрипте не показано:

играя с селекторами, чтобы выбрать 4 угла таблицы в IE9 + с элементом 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, о иронии...)

Ответ 5

paddling влево и вправо всегда будет работать для td или th.

Но в случае padding-top и padding-bottom вы просите td (или th) увеличить его высоту. Тогда как насчет братьев и сестер? Чего вы ожидаете?

Следовательно, для заполнения верхнего или нижнего уровня для работы вы применяете к нему родительский элемент, который является строкой ячеек.

Ответ 6

поскольку теги похожи, и они не предназначены для заполнения таблицы, а для хранения других элементов. даёт понять: если вы хотите добавить заголовок в свою таблицу, вы не будете его вставлять, вместо этого вы добавите его внутри, а также, если хотите заполнить данные внутри таблицы, вам нужно будет вставить их внутри

Надеюсь, этот ответ прояснит ваш вопрос.