Border collapse свойство: Свойство border-collapse | CSS справочник – border-collapse | CSS | WebReference

Содержание

border-collapse | CSS | WebReference

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

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

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

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

Значение по умолчаниюseparate
НаследуетсяДа
ПрименяетсяК элементу <table> или к элементам, у которых значение 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}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.
<время>#
×

Значения

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

Песочница

 201320142015
Нефть435179
Золото293448
Дерево385736

Пример

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

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

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

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

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

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

border-collapse | CSS справочник

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

12.0+ 5.0+ 1.0+ 1.0+ 4.0+ 1.2+

Описание

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 Указывает, что значение наследуется от родительского элемента.

Пример

Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы

div {
border-collapse: collapse;
}

СSS Свойство border-collapse



Пример

Установить модель сворачивающихся границ для двух таблиц:

#table1 {
    border-collapse: separate;
}

#table2 {
    border-collapse: collapse;
}

Редактор кода »

Определение и использование

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


Поддержка браузеров

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

Свойство
border-collapse 1.0 5.0 1.0 1.2 4.0


CSS Синтаксис

border-collapse: separate|collapse|initial|inherit;

Значение свойств

Значение Описание Воспроизвести
separate Границы разделены; каждая ячейка будет отображать свои собственные границы. Это индекс. Воспроизвести »
collapse Границы сворачиваются в одну границу, когда это возможно (свойства border-spacing и empty-cells имеют эффект нет) Воспроизвести »
initial Задает для этого свойства значение индекса. Прочитать о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитать о
inherit

Примеры

Пример

При использовании "border-collapse: separate", может использоваться свойство border-spacing , чтобы установить пространство между клетками:

#table1 {
    border-collapse: separate;
    border-spacing: 10px;
}

Редактор кода »

Пример

При использовании "border-collapse: collapse", ячейка, которая появляется первой в коде будет "выигрывать":

table, td, th {
    border: 3px solid red;
}

#table1 {
    border-collapse: collapse;
    border-color: blue;
}

Редактор кода »

Связанные страницы

CSS учебник: CSS Table

HTML DOM справочник: Свойство borderCollapse


seodon.ru | CSS справочник - border-collapse

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

Свойство CSS border-collapse используется для управления способом отображения рамок (границ) вокруг ячеек таблицы. По умолчанию браузеры выделяют каждой ячейке собственную рамку, а с помощью border-collapse можно сделать границы ячеек общими с границами соседних ячеек.

Тип свойства

Назначение: таблицы.

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

Наследуется: да.

Значения

Значением свойства border-collapse является одно из ключевых слов.

  • collapse — у соседних ячеек таблицы имеется только одна общая рамка (граница), а те границы ячеек, которые являются соседними с рамкой таблицы, вообще не отображаются.
  • separate — каждая ячейка таблицы имеет свою собственную рамку и если расстояние между ячейками равно нулю (свойство border-spacing), то границы ячеек прилегают друг к другу.
  • inherit — наследует значение border-collapse от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: separate.

Таблица с border-collapse: collapse.

Таблица с border-collapse: separate.

Синтаксис

border-collapse: collapse | separate | inherit

Пример CSS: использование border-collapse

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство border-collapse</title>
  <style type="text/css">
   table {
    width: 100%; /* ширина таблицы */
    text-align:center; /* содержимое таблицы по центру */
    border: #00ff00 4px double; /* стили рамки таблицы */
    border-collapse:collapse; /* делаем границы общими */
   }
   th, td {
    border: #ff0000 1px solid;
    padding:3px; /* внутренние отступы ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Месяц</th><th>Кролики, шт</th><th>Корм, кг</th></tr>
   <tr><td>Июнь</td><td>10</td><td>45</td></tr>
   <tr><td>Июль</td><td>38</td><td>87</td></tr>
   <tr><td>Август</td><td>65</td><td>169</td></tr>
   <tr><th>Итого:</th><th>65</th><th>301</th></tr>
  </table>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS border-collapse.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

CSS свойство border-collapse | назначение, допустимые значения, примеры

Свойство border-collapse — определяет какой из двух способов отображения соседних границ в таблице будет использован. Относится как к соседним границам ячейка-ячейка, так и к ячейка-таблица.

Допустимые значения

  • collapse — линия между соседними границами будет общая (одна линия)
  • separate — каждая ячейка имеет свою границу (при соприкосновении границ, общая граница будет иметь двойную толщину)
  • inherit — наследует значение от родителя
Значение по умолчанию separate
Применимо table, thead, tbody, tfoot, colgroup, col, tr, th, td
Наследование нет
Версия CSS CSS 2
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 7 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

table {
border-collapse: collapse;
}

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- table { border-collapse: collapse; border: 1px solid #000; } td { border: 1px solid #000; padding: 2px; } --> </style> </head> <body> <table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> </table> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Свойство border-color Свойство border-bottom-width

CSS свойство border-collapse | назначение, допустимые значения, примеры

Свойство border-collapse — определяет какой из двух способов отображения соседних границ в таблице будет использован. Относится как к соседним границам ячейка-ячейка, так и к ячейка-таблица.

Допустимые значения

  • collapse — линия между соседними границами будет общая (одна линия)
  • separate — каждая ячейка имеет свою границу (при соприкосновении границ, общая граница будет иметь двойную толщину)
  • inherit — наследует значение от родителя
Значение по умолчанию separate
Применимо table, thead, tbody, tfoot, colgroup, col, tr, th, td
Наследование нет
Версия CSS CSS 2
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 7 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

table {
border-collapse: collapse;
}

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- table { border-collapse: collapse; border: 1px solid #000; } td { border: 1px solid #000; padding: 2px; } --> </style> </head> <body> <table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> </table> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

По теме:

Свойство border-collapse. CSS справочник | Vaden Pro

Характеристики свойства

В каких браузерах работает?
8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
В каких версиях CSS используется?
CSS 1 CSS 2 CSS 2.1 CSS 3
- + + +
Для чего используется?

Метод оптимизации отображения таблиц, в которых для ячеек установлены границы. При отсутствии этого свойства границы соседних ячеек накладываются друг на друга и получается двойная граница. Если прописать в таблице стилей свойство border-collapse со значением collapse, то браузер установит для соседних ячеек общую границу. Для наглядности ниже приведен пример таблицы с этим свойством и без него:

border-table

Как правильно задавать?
border-collapse: значение;
Какие могут быть значения?
  • collapse - границы ячеек оптимизируются, выводятся общие границы одинаковой толщины.
  • separate - для каждой ячейки таблицы выводится своя граница, возможно слитие соседних границ.
  • inherit - повторяет стиль родительского элемента.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство border-collapse</title>
  <style>
   table { 
    width: 100%; 
    border: 2px solid #444; 
    border-collapse: collapse; 
   }
   td {
	border: 2px solid #444; 
	text-align:center;
	}
  </style>
 </head>
 <body>   
  <table>
   <tr> 
    <td>&nbsp;</td><td>2013</td>
    <td>2014</td><td>2015</td>
   </tr>
   <tr> 
    <td>Рост, см</td><td>170</td>
    <td>173</td><td>176</td>
   </tr>
   <tr> 
    <td>Вес, кг</td><td>65</td>
    <td>68</td><td>66</td>
   </tr>
  </table> 
 </body>
</html>

По итогу получаем

border-collapse

Оценок: 2 (средняя 5 из 5)

Тип CSS свойства: 

border-collapseborder-collapse

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *