Perché il confine di <th> e <thead> non vengono visualizzati qui?

Question

Perché entrambi i bordi non vengono visualizzati?

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

È il comportamento previsto. Strano, ma atteso.
I bordi stanno crollando e quello più spesso prevale.

È possibile visualizzarlo con questo esempio: i bordi commoventi sulla prima riga vengono compressi, quelli sulla seconda riga no.
Sulla prima riga la prima cella ottiene il bordo più spesso (10px verde> 5px rosso) e la seconda cella ottiene il bordo più spesso (5px rosso> 3px verde).
Sulla seconda riga non ci sono bordi "contigui" da comprimere, quindi i bordi verde 10px e verde 3px vengono visualizzati 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> 

Ho bisogno di chiarire comunque la spiegazione?

PS: in teoria è possibile utilizzare la proprietà border-collapse sul tavolo per impedirlo, ma non sto gestendo.
Inoltre, il valore predefinito sembra non essere compresso.

Ulteriori letture: http://www.w3.org/TR/CSS2/tables.html#borders

Answer 2

È possibile utilizzare l'elemento <thead> come selettore in questo modo:

thead { background: red; } 

You can see an example here

Answer 3

Dare un nome di classe al vostro tavolo. E lo stile come qui sotto

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

provare questo codice. I confini di thead e th sono mostrati. Può essere che abbia una precedenza maggiore quando esiste uno stesso conflitto di attributi di stile tra th e thead