Why border of <th> and <thead> both not showing here?

Question

Why both border not showing?

http://jsfiddle.net/r8mA7/

<table>
<thead style="border-top:10px solid red; background:yellow">
    <tr><th style="border-top:10px solid green">Name</th></tr>
</thead>
<tbody>
    <tr><td>Bob</td></tr>
    <tr><td>Tom</td></tr>
</tbody>
</table>

Answer 1

It's the expected behaviour. Odd, but expected.
The borders are collapsing, and the thicker one prevails.

You can see it with this example: the touching borders on first row collapse, the ones on the second row don't.
On the first row the first cell gets the thicker border (10px green > 5px red), and the second cell gets the thicker border (5px red > 3px green).
On the second row there are no "adjoining" borders to collapse, so the 10px green and 3px green borders show up normally.

<table>
<thead style="border-top:5px solid red; background:yellow">
  <tr>
    <th style="border-top:10px solid green">Name</th>
    <th style="border-top:3px solid green">Name</th>
  </tr>
  <tr>
    <th style="border-top:10px solid green">Name</th>
    <th style="border-top:3px solid green">Name</th>
  </tr>
</thead>
</table>

Need me to clear up the explanation anyhow?

PS: theoretically you could use the border-collapse property on the table to prevent that, but I'm not managing.
Also, the default value seems to be not to collapse.

Further reading: http://www.w3.org/TR/CSS2/tables.html#borders

Answer 2

You can use the <thead> element as the selector like this:

thead { background: red; }

You can see an example here