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


110

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


2
Я использую firefox, и я не вижу границы
Speedysnail6

Ответы:


258

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

table {
  border-collapse: collapse;
}

JSFiddle .

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

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

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

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


2
Почему именно граница была скрыта?
edi9999 07

4
Потому что именно так separateработает модель границы таблицы по умолчанию: вы указываете границы для каждой ячейки. Я дополню ответ цитатами из документации.
raina77ow 08

1
@ edi9999 - рекомендую использовать таблицу стилей сброса. Проверьте это http://www.cssreset.com/
Black Sheep

2
Конкретное объяснение того, почему граница была скрыта, - это утверждение в цитируемой спецификации CSS, представленное как применяемое в модели с разделенными границами: «Строки, столбцы, группы строк и группы столбцов не могут иметь границ (т.е. пользовательские агенты должны игнорировать границу. свойства для этих элементов) ».
Юкка К. Корпела

Игра с вашим примером со скрипачом помогла, спасибо;)
Zeek2
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.