Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 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»:
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
The border-collapse property applies to the
element and the default is separate.
The separated borders model renders a table such that adjacent cells have their own borders that are not shared, and the border-spacing property determines the spacing between the cells.
The collapsed borders model renders a table such that adjacent cells share their borders.
Browser Compatibility
The CSS border-collapse property has basic support with the following browsers:
Chrome
Firefox (Gecko)
Internet Explorer 5+ (IE 5+)
Opera
Safari (WebKit)
Example
We will discuss the border-collapse property below, exploring examples of how to use this property in CSS.
Let’s first look at an example of where we apply the separated borders model to our table. For example:
The CSS would look like this:
The HTML would look like this:
The table using the separated borders model would look like this:
In this CSS border-collapse example, we have set the border-collapse property to a value of separate for the
tag which renders the table using the separated borders model (default for HTML tables). As you can see, the adjacent cells have their own distinct borders.
Now we will change our table to use the collapsed borders model by changing the border-collapse property to collapse and see what happens:
Now using the collapsed borders model, our table would look like this:
As you can see, our table is rendered using the collapsed borders model which results in the adjacent cells sharing their borders. This can reduce the whitespace between the table cells and remove some of the table border styling since the borders are now shared.
Свойство CSS border-collapse
Описание и использование
Свойстов CSS border-collapse указывает на то, надо ли удваивать границы таблицы между ячейками таблицы.
Значение по умолчанию
separate
Наследование
да
Версия CSS
CSS 2
Синтаксис JavaScript
object.style.borderCollapse=»collapse»
Поддержка в браузерах
Свойство border-collapse поддерживается всеми основными браузерами.
Заметка: ни одна версия Internet Explorer (включая IE не поддерживает значение inherit.
Заметка: если не указан Doctype, свойство border-collapse может дать неожиданные результаты.
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
Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 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
Самоучитель
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
синтаксис
Значения
collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
Улучшаем отображение рамок
Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse . Вот так:
Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.
Хотите писать JavaScript, используя современный синтаксис ES2020? Уметь тестировать свои программы? Записывайтесь на профессиональный курс по JavaScript второго уровня, проходящий c 18 ноября 2020 по 22 января 2020. До 18 ноября цена 23 900