html table border collapse

На чтение 2 мин. Опубликовано
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
Содержание
  1. Краткая информация
  2. Версии CSS
  3. Описание
  4. Синтаксис
  5. Значения
  6. Браузеры

Краткая информация

Значение по умолчанию separate
Наследуется Нет
Применяется К тегу или к элементам, у которых значение display установлено как table или inline-table
Ссылка на спецификацию

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

а б

Рис. 1. Вид таблицы при использовании свойства border-collapse

Синтаксис

border-collapse: collapse | separate | inherit

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Вид таблицы при использовании свойства border-collapse

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . В IE6 и IE7 не отменяется действие атрибута cellspacing .

I have a table with multiple lines, e.g.:

Now, in javascript (based on a radio input field) I want to remove (e.g.) #line3 by adding a visibility:collapse , something like:

The special thing about #line3 is that it has a border-top :

The problem I have with that: When I «collapse» #line3 the border persists, eventhough the element «does not exist». I guess this should be due to the border-collapse in the table style «inheriting» a border element on the previous tr element? How can I fix that issue?

EDIT: I’d like to keep the javascript like that. Of course I could remove/readd the style element but there should be a different way to solve this?!

Свойство CSS border-collapse отвечает за правило отрисовки границ между ячейками в таблице html.

Синтаксис CSS border-collapse

  • collapse — линия между соседними границами будет общая (одна линия);
  • separate (по умолчанию) — у каждой ячейки своя граница;
  • inherit — применяется значение родительского элемента;

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

Оцените статью