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

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

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

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

table tr {
  border: 1px solid black;
}

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

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

Это аналогичный вопрос: установить границу таблицы tr, работает во всем, кроме IE 6 и 7 , но, похоже, работает везде, кроме IE.

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

table {
  border-collapse: collapse;
}

JSFiddle .

Причина, по которой он так себя ведет, на самом деле довольно хорошо описана в спецификации :

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

... и позже, для collapseнастройки:

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