¿Por qué el borde de <th> y <thead> no se muestran aquí?

Question

¿Por qué no se muestran ambos bordes?

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

Es el comportamiento esperado. Extraño, pero esperado.
Los bordes se están contrayendo, y el más grueso prevalece.

Puede verlo con este ejemplo: los bordes que tocan en la primera fila colapsan, los que están en la segunda fila no.
En la primera fila, la primera celda tiene el borde más grueso (10px verde> 5px rojo) y la segunda celda tiene el borde más grueso (5px rojo> 3px verde).
En la segunda fila no hay bordes "contiguos" para colapsar, por lo que los bordes verde 10px verde y 3px aparecen normalmente.

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

¿Necesito que aclare la explicación de todos modos?

PD: teóricamente podría usar la propiedad border-collapse en la tabla para evitar eso, pero no lo estoy logrando.
Además, el valor predeterminado parece no colapsar.

Más información: http://www.w3.org/TR/CSS2/tables.html#borders

Answer 2

Usted puede utilizar el elemento <thead> como el selector de la siguiente manera:

thead { background: red; } 

You can see an example here

Answer 3

Dar un nombre de clase a su mesa. Y el estilo como abajo

<style> 
.mytable thead{ 
//your style goes here 
} 


</style> 

EDIT:

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

probar este código. El borde de thead y th se muestra. Puede ser que tenga una mayor prioridad cuando existe un conflicto de atributo de estilo entre th y thead