Межа навколо елемента tr не відображається?


108

Схоже, що 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.


2
Я використовую firefox і не бачу кордону
Speedysnail6

Відповіді:


256

Додайте це до таблиці стилів:

table {
  border-collapse: collapse;
}

JSFiddle .

Причина, по якій він так поводиться, насправді досить добре описана в специфікації :

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

... та пізніше для collapseналаштування:

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


2
Чому саме був прихований кордон?
edi9999

4
Тому що так separateпрацює модель за межі таблиці за замовчуванням: ви визначаєте межі для кожної комірки. Я оновлю відповідь цитатами з документації.
raina77ow

1
@ edi9999 - рекомендую використовувати таблицю стилів скидання. Перевірте це http://www.cssreset.com/
Чорна вівця

2
Конкретним поясненням того, чому прихована межа, є це твердження у цитованій специфікації CSS, подане як застосоване в моделі відокремлених меж: "Рядки, стовпці, групи рядків та групи стовпців не можуть мати межі (тобто агенти користувачів повинні ігнорувати кордон властивості для цих елементів). "
Jukka K. Korpela

Гра зі своїм прикладом скрипаля допомогла, дякую;)
Zeek2
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.