Border collapse css что это

CSS свойство border-collapse

CSS свойство border-collapse определяет, как отображать границы вокруг ячеек таблицы.

Когда имеется только одна граница между ячейками, значениями для свойства border-style являются «inset», которое действует также, как «groove», и «outset», которое действует как «ridge». Когда ячейки разделены, расстояние между ними определяется свойством border-spacing.

Синтаксис

Пример

В следующем примере можно увидеть, что, когда используем «border-collapse: separate», можно установить расстояние между ячейками с помощью свойства border-collapse , а если используем «border-collapse: collapse» свойство border-collapse не имеет эффекта:

border — collapse

Свойство border — collapse управляет отображением границ таблицы и её ячеек.

Пример

Скопировать ссылку на секцию «Пример» Скопировано

Как пишется

Скопировать ссылку на секцию «Как пишется» Скопировано

В качестве значения для свойства border — collapse используются следующие ключевые слова:

• separate — границы отображаются отдельно друг от друга. Это значение по умолчанию.
• collapse — соседние границы отображаются как одна граница.

Как понять

Скопировать ссылку на секцию «Как понять» Скопировано

По умолчанию, границы в таблице отображаются отдельно друг от друга. Это значит, что если у неё или её ячеек есть границы, то между ними будет пространство (размерами которого можно управлять с помощью border — spacing ). Если задать свойству border — collapse значение collapse , то все смежные границы будут отображаться как одна.

Читайте также

border — spacing

Свойство для управления расстоянием между рамками ячеек таблицы.

Таблицы

border — style

Рамку можно сделать двойной, пунктирной и даже объёмной в точку! И всё это одним свойством.

border-collapse¶

Свойство border-collapse устанавливает, как отображать границы вокруг ячеек таблицы.

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

Когда ячейки свернуты, значение inset в border-style ведет себя как groove , а outset ведет себя как ridge .

Когда ячейки разделены, расстояние между ячейками определяется свойством border-spacing .

• border-collapse

Синтаксис¶

Значения¶

Применяется к элементу <table> или к элементам, у которых значение display установлено как table или inline-table .

border-collapse

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.

Try it

When cells are collapsed, the border-style value of inset behaves like groove , and outset behaves like ridge .

When cells are separated, the distance between cells is defined by the border-spacing property.

Syntax

The border-collapse property is specified as a single keyword, which may be chosen from the list below.

Values

Adjacent cells have shared borders (the collapsed-border table rendering model).

Adjacent cells have distinct borders (the separated-border table rendering model).