Il bordo attorno all'elemento tr non viene visualizzato?

Question

Sembra che Chrome/Firefox non renda i bordi su tr, ma esegue il rendering del bordo se il selettore è table tr td.

Come posso impostare un bordo su una tr?

mio tentativo, che non funziona:

HTML

<table>  
    <tbody> 
     <tr> 
      <td> 
       Text 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS

table tr 
{ 
    border:1px solid black; 
} 

http://jsfiddle.net/edi9999/VzPN2/

Questa è una simila domanda: Set border to table tr, works in everything except IE 6 & 7, ma sembra funzionare ovunque tranne IE.

Answer 1

Aggiungere questo al foglio di stile:

table { 
    border-collapse: collapse; 
} 

JSFiddle.

Il motivo per cui si comporta in questo modo è in realtà descritta abbastanza bene in the specification:

Ci sono due modelli distinti per impostare i bordi nelle celle della tabella in CSS. Uno è più adatto per i cosiddetti bordi separati intorno alle celle individuali , l'altro è adatto per i bordi che sono continuo da un'estremità della tabella all'altra.

... e successivamente, per collapse impostazione:

Nel modello a bordi collassati, è possibile specificare bordi che circondano tutta o parte di una cella, riga gruppo di riga, colonna e il gruppo della colonna.

Answer 2

<tr border="1"> 

o

<table border="1"> 

dovrebbe funzionare.

Se si vuole fare con i CSS, forse sarebbe meglio farlo con una classe o

<tr style="border 1px solid black">