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

Кажется, что 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/

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

Ответы

Ответ 1

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

table {
  border-collapse: collapse;
}

JSFiddle.

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

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

... и позже, для параметра collapse:

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

Ответ 2

<tr border="1">

или

<table border="1">

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

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

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