Why isn't padding applied to table elements? - html

Question

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>
Notice the 10px of padding on the thead.
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
'padding'
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

Answer 2

Try placing the padding in the th element instead. Typically you want to add padding to the th or td element, depending on the circumstance.
thead th {
padding: 10px;
}

Answer 3

Relevant part of CSS2.1: Tables
Please have a look at this diagram: table layers. padding can only be applied to table as a whole or th and td cells afaik. Not to forget caption also. Other layers are complicated enough in the various table layout algorithms not to have padding applied to them ^^
Here's a fiddle http://jsfiddle.net/QB97d/1/ showing other properties you can play with.
border-spacing: 8px 10px; is like a margin around each cell of a table. Get rid of it with border-collapse: collapse;
table-layout: fixed; will trigger a completely different algorithm ("render widths as I tell you to, don't care about the relative quantity of content in each cell anymore")
border is another way of giving space around elements, around padding
empty-cells: hide may trigger special behavior
Not shown in this fiddle:
playing with selectors to select the 4 corners of a table in IE9+ with a thead element and unknown type of cell in each corner (I'll let you find the 4 edges ;) ):
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 (and its vendor prefixes) for calculating cell widths taking into account padding and border widths (like IE6 did in Quirks mode, oh irony...)

Answer 4

Padding between thead and tbody
Unfortunately, padding is not available for thead, tbody nor tr.
Nonetheless, more padding between thead and tbody can be achieved by selecting the data cells of the first row of the table body:
tbody tr:first-child td {
padding-top: 2.5ex;
}
Doing so, preserves the relative position of any header borders.

Answer 5

thead don't support css attribute "padding" if you need apply css in thead then css modify like :
thead tr th {
text-align: left;
background-color: yellow;
padding: 10px;
}
Or
th {
text-align: left;
background-color: yellow;
padding: 10px;
}

Answer 6

paddling left & right would always work for td or th as well.
But, in case of padding-top & padding-bottom, you are asking the td (or th) to increase it's height. Then what about the siblings?? What do you expect to happen??
Hence for padding top or bottom to work, you apply to it's parent which is the row of cells.

Answer 7

because tags like and they are not meant to populate the table, but to contain other elements.
lets make it clear : if you want to add header to your table, you wont insert it in , instead you will add it inside , and the same for , if you want to populate data inside a table, you will need to insert them inside
i hope this answer clarify your question