Главная » Языки программирования

border-collapse

Содержание
  1. CSS border-collapse Property
  2. Browser Support
  3. CSS Syntax
  4. Property Values
  5. More Examples
  6. Example
  7. Example
  8. Related Pages
  9. COLOR PICKER
  10. Report Error
  11. Thank You For Helping Us!
  12. border-collapse¶
  13. Демо¶
  14. Синтаксис¶
  15. Значения¶
  16. Спецификации¶
  17. Описание и примеры¶
  18. border-collapse
  19. Краткая информация
  20. Синтаксис
  21. Значения
  22. Песочница
  23. Пример
  24. Объектная модель
  25. Примечание
  26. Спецификация
  27. Браузеры
  28. См. также
  29. border-collapse
  30. Try it
  31. Syntax
  32. Values
  33. Formal definition
  34. Formal syntax
  35. Examples
  36. A colorful table of browser engines
  37. HTML
  38. CSS
  39. Result
  40. Specifications
  41. Browser compatibility
  42. border-collapse
  43. Синтаксис
  44. Значения
  45. Браузеры
  46. CSS по теме

CSS border-collapse Property

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.

CSS Syntax

Property Values

Value Description Demo
separate Borders are separated; each cell will display its own borders. This is default. Demo ❯
collapse Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) Demo ❯
initial Sets this property to its default value. Read about initial
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;
>

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

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
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

border-collapse¶

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

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

Рис. 1а. Рамки двойной толщины

Рис. 1а. Общие рамки ячеек таблицы

Демо¶

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

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

  • 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-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • 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-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис¶

/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: revert-layer; border-collapse: unset;

Значения¶

collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing . separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

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

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
 html> head> meta charset="utf-8" /> title>border-collapsetitle> style> table  width: 100%; /* Ширина таблицы */ border: 4px double black; /* Рамка вокруг таблицы */ border-collapse: collapse; /* Отображать только одинарные линии */ > th  text-align: left; /* Выравнивание по левому краю */ background: #ccc; /* Цвет фона ячеек */ padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ > td  padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ > style> head> body> table> tr> th>th> th>2013th> th>2014th> th>2015th> tr> tr> td>Нефтьtd> td>43td> td>51td> td>79td> tr> tr> td>Золотоtd> td>29td> td>34td> td>48td> tr> tr> td>Деревоtd> td>38td> td>57td> td>36td> tr> table> body> html>

Источник

border-collapse

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

Рис. 1а Рис. 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

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

Объектная модель

Объект.style.borderCollapse

Примечание

Internet Explorer до версии 8.0 не отменяет действие атрибута cellspacing .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

Источник

border-collapse

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

Try it

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

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

Syntax

/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: revert-layer; border-collapse: unset;

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).

Formal definition

Formal syntax

Examples

A colorful table of browser engines

HTML

table class="separate"> caption> code>border-collapse: separatecode> caption> tbody> tr> th>Browserth> th>Layout Engineth> tr> tr> td class="fx">Firefoxtd> td class="gk">Geckotd> tr> tr> td class="ed">Edgetd> td class="tr">EdgeHTMLtd> tr> tr> td class="sa">Safaritd> td class="wk">Webkittd> tr> tr> td class="ch">Chrometd> td class="bk">Blinktd> tr> tr> td class="op">Operatd> td class="bk">Blinktd> tr> tbody> table> table class="collapse"> caption> code>border-collapse: collapsecode> caption> tbody> tr> th>Browserth> th>Layout Engineth> tr> tr> td class="fx">Firefoxtd> td class="gk">Geckotd> tr> tr> td class="ed">Edgetd> td class="tr">EdgeHTMLtd> tr> tr> td class="sa">Safaritd> td class="wk">Webkittd> tr> tr> td class="ch">Chrometd> td class="bk">Blinktd> tr> tr> td class="op">Operatd> td class="bk">Blinktd> tr> tbody> table>

CSS

.collapse  border-collapse: collapse; > .separate  border-collapse: separate; > table  display: inline-table; margin: 1em; border: dashed 5px; > table th, table td  border: solid 3px; > .fx  border-color: orange blue; > .gk  border-color: black red; > .ed  border-color: blue gold; > .tr  border-color: aqua; > .sa  border-color: silver blue; > .wk  border-color: gold blue; > .ch  border-color: red yellow green blue; > .bk  border-color: navy blue teal aqua; > .op  border-color: red; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

border-collapse

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

Рис. 1а Рис. 1б
а б

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

Синтаксис

border-collapse: collapse | separate | inherit

Значения

collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing . separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

        
 
 2013 20142015 
 
Нефть43 5179 
 
Золото29 3448 
 
Дерево38 5736

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

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

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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . В IE6 и IE7 не отменяется действие атрибута cellspacing .

CSS по теме

Источник

Читайте также:  Html table несколько tbody
Оцените статью
© 2024 Программирование