HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут border-collapse в CSS

Атрибут border-collapse в CSS

1150

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

="/assets/images/css/css_border-collapse_1a.png" alt="Мал. 1а" width="204" height="85">
Мал. 1б
а б

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

Значення за замовчуванням separate
Успадковується Так
Застосовується До елемента <table> або до елементів, у яких значення display встановлено як table або inline-table
Анімується Ні

Синтаксис 

<code>border-collapse: collapse | separate

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

collapse
Лінія між осередками відображається лише одна, також ігнорується значення атрибуту cellspacing.
separate
Навколо кожного осередку відображається своя власна рамка, в міс ти дотику осередків показуються відразу дві лінії.

Пісочниця

 2013 20142015
Нафта43 5179
Золото29 3448
Дерево38 5736 
table { border-collapse: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-collapse</title> <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>&nbsp;</th><th>2013</th> <th>2014</th><th>2015</th>
</tr> <tr> <td>Нафта</td><td>43</td> <td>51</td><td>79</td>
</tr> <tr> <td>Золото</td><td>29</td> <td>34</td><td>48</td>
</tr> <tr> <td>Дерево</td><td>38</td> <td>57</td><td>36</td>
</tr>
</table>
</body>
</html>

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

Вигляд таблиці при використанні властивості border-collapse

Мал. 2. Вигляд таблиці при використанні властивості border-collapse

Об'єктна модель

Об'єкт.style.borderCollapse

Примітка

Internet Explorer до версії 8.0 не скасовує дію атрибута cellspacing.

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

Специфікація Статус
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація

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

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

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

5 12 1 4 1.2 1
table>

Браузери

У таблиці браузерів застосовуються такі позначення.

  •   ;— властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">
Таблиці
© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS
2.3 1 11 3