В качестве значения для свойства border — collapse используются следующие ключевые слова:
separate — границы отображаются отдельно друг от друга. Это значение по умолчанию.
collapse — соседние границы отображаются как одна граница.
Как понять
Скопировать ссылку «Как понять» Скопировано
По умолчанию, границы в таблице отображаются отдельно друг от друга. Это значит, что если у неё или её ячеек есть границы, то между ними будет пространство (размерами которого можно управлять с помощью border — spacing ). Если задать свойству border — collapse значение collapse , то все смежные границы будут отображаться как одна.
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а
б
Рис. 1. Вид таблицы при использовании свойства border-collapse
Краткая информация
Значение по умолчанию
separate
Наследуется
Да
Применяется
К элементу
или к элементам, у которых значение display установлено как table или inline-table
Анимируется
Нет
Синтаксис
border-collapse: collapse | separate
Описание
Пример
Указывает тип значения.
A && B
Значения должны выводиться в указанном порядке.
&&
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,]*
+
Повторять один или больше раз.
+
?
Указанный тип, слово или группа не является обязательным.
inset?
Повторять не менее A, но не более B раз.
#
Повторять один или больше раз через запятую.
#
Значения
collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
Песочница
Рис. 2. Вид таблицы при использовании свойства border-collapse
Объектная модель
Объект.style.borderCollapse
Примечание
Internet Explorer до версии 8.0 не отменяет действие атрибута cellspacing .
Спецификация
Спецификация
Статус
CSS Level 2 (Revision 1)
Рекомендация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
5
12
1
4
1.2
1
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Рецепты
Как добавить рамку вокруг ячеек?
Как установить расстояние между ячеек?
Практика
Справочник CSS
!important
::after
::backdrop
::before
::first-letter
::first-line
::marker
::placeholder
::selection
:active
:blank
:buffering
:checked
:default
:dir
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-within
:fullscreen
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:muted
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:paused
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:seeking
:stalled
:target
:valid
:visited
:volume-locked
@charset
@document
@font-face
@import
@keyframes
@media
@page
@supports
@viewport
accent-color
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
aspect-ratio
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-kerning
font-size
font-stretch
font-style
font-variant
font-weight
gap
height
hyphenate-character
hyphenate-limit-chars
hyphens
image-rendering
justify-content
left
letter-spacing
line-clamp
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
marks
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
place-content
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip-ink
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-fill-color
text-indent
text-orientation
text-overflow
text-shadow
text-stroke
text-stroke-color
text-stroke-width
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom
Свойство border-collapse
Свойство border-collapse заставляет двойные границы между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы) схлопнуться и выглядеть как одна.
Данное свойство применяется только для таблиц и для элементов с display в значении table или inline-table . Для обычных блочных элементов оно, к большому сожалению, работать не будет. Учтите, что применять следует для таблицы, а не для ее ячеек.
Синтаксис
Значения
Значение
Описание
collapse
Двойные границы будут выглядеть как одна. Есть побочные эффекты: перестанет работать свойство border-spacing и атрибут cellspacing .
separate
Каждая ячейка таблицы будет иметь свою границу (поэтому в некоторых местах границы будут двойными, если промежуток между ячейками нулевой).
Значение по умолчанию: separate .
Пример . Значение separate
Сейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):
А сейчас граница задана ячейкам, но самой таблице не задана. Там, где две ячейки имеют общую границу, — границы будут двойные, в остальных местах — одиночные:
CSS свойство border-collapse определяет модель отображаемой рамки для таблицы. Это имеет большое влияние на внешний вид и стиль ячеек таблицы.
По умолчанию свойство установлено в значение «separate» — это традиционная модель рамок для таблицы в HTML, когда смежные ячейки таблицы имеют свои собственные различные рамки. Расстояние между рамками ячеек контролируется свойством border-spacing.
Если модель рамки, заданная по умолчанию, не подходит, то можно воспользоваться значением «collapse» — это приведет к объединению рамок между ячейками и таблицей, то есть будет только одна общая рамка без пространства между ячейками.
Значение по умолчанию:
separate
Применяется:
к table и inline-table элементам
Анимируется:
нет
Наследуется:
да
Версия:
CSS2
Синтаксис JavaScript:
object.style.borderCollapse=»collapse»
Синтаксис
border-collapse: separate|collapse|inherit;
Значения свойства
Значение
Описание
collapse
Рамки объединяются в одну, когда это возможно (свойства border-spacing и empty-cells будут проигнорированы).
separate
Рамки раздельные (свойства border-spacing и empty-cells не игнорируются).
inherit
Указывает, что значение наследуется от родительского элемента.
