border-collapse в CSS


border-collapse

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию separate
Наследуется Нет
Применяется К тегу или к элементам, у которых значение свойство display установлено как table или inline-table
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.ШТМЛ#propdef-border-collapse

Описание

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

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

Синтаксис

border-collapse: collapse | separate

Аргументы

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

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

border-collapse

Свойство CSS border-collapse используется для управления способом отображения рамок (границ) вокруг ячеек таблицы. По умолчанию браузеры выделяют каждой ячейке собственную рамку, а с помощью border-collapse можно сделать границы ячеек общими с границами соседних ячеек.

Тип свойства

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

Значения

Значением свойства border-collapse является одно из ключевых слов.

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


Процентная запись: не существует.

Значение по умолчанию: separate.

Таблица с border-collapse: collapse.

Таблица с border-collapse: separate.

Синтаксис

Пример CSS: использование border-collapse

Результат. Использование свойства CSS border-collapse.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

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

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

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

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

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


Особенность border в сочетании с collapse в Firefox

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

  • 27 августа 2020 в 19:52 Начало моего пути, в мир веба, в роли верстальщика

Это «Песочница» — раздел, в который попадают дебютные посты пользователей, желающих стать полноправными участниками сообщества.

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

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

CSS border-collapse Property

Example

Set the collapsing borders model for two tables:

#table1 <
border-collapse: separate;
>

#table2 <
border-collapse: collapse;
>

More «Try it Yourself» examples below.

Definition and Usage

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

Default value: separate
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.borderCollapse=»collapse» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property
border-collapse 1.0 5.0 1.0 1.2 4.0

CSS Syntax

Property Values

Value Description Play it
separate Borders are separated; each cell will display its own borders. This is default. Play it »
collapse Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

When using «border-collapse: separate», the border-spacing property can be used to set the space between the cells:

Example

When using «border-collapse: collapse», the cell that appears first in the code will «win»:

table, td, th <
border: 3px solid red;
>

#table1 <
border-collapse: collapse;
border-color: blue;
>

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.


Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

CSS: border-collapse property

This CSS tutorial explains how to use the CSS property called border-collapse with syntax and examples.

Description

The CSS border-collapse property defines the rendering model to use for the table borders which affects the table’s appearance.

Syntax

The syntax for the border-collapse CSS property is:

Parameters or Arguments

The rendering model to apply to the table borders. It can be one of the following:

Value Description
separate Use the separated borders model to render the table borders
table
collapse Use the collapsed borders model to render the table borders
table
inherit Element will inherit the border-collapse from its parent element
table