Il bordo attorno all’elemento tr non viene visualizzato?

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

Come posso impostare un bordo su una tr?

Il mio tentativo, che non funziona:

HTML

 
Text

CSS

 table tr { border:1px solid black; } 

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

Questa è una domanda simile: imposta il bordo sul tavolo tr, funziona in tutto tranne IE 6 e 7 , ma sembra funzionare ovunque tranne IE.

Aggiungi questo al foglio di stile:

 table { border-collapse: collapse; } 

JSFiddle .

Il motivo per cui si comporta in questo modo è in realtà descritto abbastanza bene nelle specifiche :

Esistono due modelli distinti per l’impostazione di bordi sulle celle di una tabella in CSS. Uno è più adatto per i cosiddetti bordi separati attorno alle singole celle, l’altro è adatto per i bordi che sono continui da un’estremità della tabella all’altra.

… e successivamente, per l’impostazione del collapse :

Nel modello di bordo compresso, è ansible specificare i bordi che circondano tutto o parte di una cella, una riga, un gruppo di righe, una colonna e un gruppo di colonne.