Style border collapse collapse

Style border collapse collapse

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

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

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

Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Версии 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 .

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;
>

Related Pages

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

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.

Поддержка браузерами

12.0+ 5.0+ 1.0+ 1.0+ 4.0+ 1.2+
Читайте также:  Программа для создания общей папки в сети

Описание

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

По умолчанию свойство установлено в значение "separate" — это традиционная модель рамок для таблицы в HTML, когда смежные ячейки таблицы имеют свои собственные различные рамки. Расстояние между рамками ячеек контролируется свойством border-spacing.

Если модель рамки, заданная по умолчанию, не подходит, то можно воспользоваться значением "collapse" — это приведет к объединению рамок между ячейками и таблицей, то есть будет только одна общая рамка без пространства между ячейками.

Ссылка на основную публикацию
Adblock detector