Граница вокруг элемента 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 66
html css html-table

1 ответ:

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

table {
  border-collapse: collapse;
}

JSFiddle.

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

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

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

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

170