Как поместить границу вокруг тэга?

У меня очень простая html-страница:

<table>
     <tr><th>header1</th><th>header2</th></tr>
     <tr><td>item1</td><td>item2</td></tr>
     <tr><td>item3</td><td>item4</td></tr>
</table>

С помощью простого css:

tr {
    border:1px solid blue;
}

Я ожидаю, что это поместит границу вокруг tr, но она вообще не будет обходить границу. Как получить границу вокруг tr?

Ответы

Ответ 1

Добавить table { border-collapse: collapse; }.

Из спецификации CSS2:

В модели [t21] каждая ячейка имеет индивидуальную границу. [...] Строки, столбцы, группы строк и группы столбцов не могут иметь границ (т.е. Пользовательские агенты должны игнорировать свойства границ для этих элементов).

Ответ 2

Ваш код работает, если вы хотите border только в строке.

Однако, если вы ищете везде border, вам нужно будет сделать это:

tr, td, th{
    border:1px solid blue;
}

Пример: http://jsfiddle.net/jasongennaro/83VjH/

Ответ 3

Границы могут быть добавлены в строки таблицы путем добавления границ к элементам <td> и <th> [Это в основном трюк CSS для достижения (взломать!), так как границы не могут быть добавлены к <tr> и <tbody> элементы таблицы]. Добавьте следующие стили в свой CSS, чтобы получить границы вокруг строк или заголовков или ячеек таблицы.

table {
    border-collapse: collapse;
}
table td, table th {
    border: solid white;
}
td {
    border-color: red (just an example, can be as per your requirement);
}

Пояснение:

  • правило border-collapse добавляется ко всей таблице. Он может иметь два других возможных свойства отдельно (по умолчанию) и наследовать. Для их соответствующих эффектов см. https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
  • Второе правило, то есть добавление свойства границы в <td> (для ячеек данных) и <th> (для ячеек заголовка) является обязательным. Если вы его не добавите, границы не появятся. В этом правиле цвет границы белый, это может быть другой цвет по вашему выбору, а не белый. В принципе, это правило активирует границы вокруг ячеек таблицы, а так как цвет белый, ничего не появится.
  • И, наконец, добавьте цвет по вашему выбору. Это правило может быть более конкретным для применения границы к одному <td> или класс <td> .