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 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...)