Граница вокруг элемента tr не отображается?

Question

Кажется, что Chrome/Firefox не отображают границы на tr, но он отображает границу, если селектор table tr td.

Как установить границу на tr?

Моя попытка, которая не работает:

HTML

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

CSS

table tr 
{ 
    border:1px solid black; 
} 

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

Это simila r вопрос: Set border to table tr, works in everything except IE 6 & 7, но он работает везде, кроме IE.

Answer 1

Добавьте это к таблице стилей:

table { 
    border-collapse: collapse; 
} 

JSFiddle.

Причина, почему он ведет себя таким образом, на самом деле описано довольно хорошо в the specification:

Есть две различные модели для установки границ на ячейки таблицы в CSS. Один из них наиболее подходит для так называемых разделенных границ вокруг отдельных ячеек, другой подходит для границ, которые являются непрерывными от одного конца стола до другого.

... а затем, для collapse установки:

В разрушающейся модели границы, можно задать границы, которые окружают все или часть ячейки, строки, группы строк, столбец , и колонка группа.

Answer 2

<tr border="1"> 

или

<table border="1"> 

должен работать.

Если вы хотите сделать это с помощью CSS, возможно, было бы лучше сделать это с классом или

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