Obramowanie wokół elementu tr nie jest wyświetlane?

Question

Wygląda na to, że Chrome/Firefox nie renderuje ramek na tr, ale renderuje ramkę, jeśli selektor to table tr td.

Jak ustawić ramkę na tr?

Moja próba, która nie działa:

HTML

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

CSS

table tr 
{ 
    border:1px solid black; 
} 

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

To simila r pytanie: Set border to table tr, works in everything except IE 6 & 7, ale wydaje się, że działa wszędzie z wyjątkiem IE.

Answer 1

Dodaj to do arkusza stylów:

table { 
    border-collapse: collapse; 
} 

JSFiddle.

Powodem dlaczego zachowuje się w ten sposób faktycznie jest dość dobrze opisane w the specification:

Istnieją dwa różne modele ustalania granic na komórkach tabeli w CSS. Jedna jest najbardziej odpowiednia dla tak zwanych oddzielnych granic wokół pojedynczych komórek, druga jest odpowiednia dla granic, które są ciągłe od jednego końca stołu do drugiego.

... a później, na collapse Otoczenie:

W zapadającego modelu granicznego, możliwe jest określenie granic, które przestrzennego całości lub części komórki, wiersz, wiersz, kolumna grupowej i kolumna grupa.

Answer 2

<tr border="1"> 

lub

<table border="1"> 

powinno działać.

Jeśli chcesz to zrobić z CSS, może byłoby lepiej zrobić to z klasy lub

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