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

Question

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

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

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

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.

Answer 1

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

table {
  border-collapse: collapse;
}

JSFiddle.

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

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

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

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

Answer 2

Можно эмулировать границу в отдельном режиме свертывания границы таблицы с помощью css box-shadow:

      table tr {
  box-shadow: 0 0 4px #ccc;
}

Answer 3

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

      border-style: solid;

если вы добавляете пользовательские стили на какой-либо веб-сайт.