Why isn't padding applied to table elements?
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
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;
}
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 withborder-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, aroundpadding
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...)