Why isn't padding applied to table elements?

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;
}