border-collapse в CSS

Описание

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

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

Синтаксис

border-collapse: collapse | separate

Аргументы

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

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

border-collapse

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

Тип свойства

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

Значения

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

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

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

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

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

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

Синтаксис

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

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

Версии CSS

Браузеры

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

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

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

Синтаксис CSS border-collapse

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

Свойство очень важное, т.к. это единственный способ корректно указать нужное значение толщины линии границы у таблиц.

Особенность border в сочетании с collapse в Firefox

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

• 27 августа 2020 в 19:52 Начало моего пути, в мир веба, в роли верстальщика

Это «Песочница» — раздел, в который попадают дебютные посты пользователей, желающих стать полноправными участниками сообщества.

Если у вас есть приглашение, отправьте его автору понравившейся публикации — тогда её смогут прочитать и обсудить все остальные пользователи Хабра.

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

CSS border-collapse Property

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.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

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

Your Suggestion:

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.

CSS: border-collapse property

This CSS tutorial explains how to use the CSS property called border-collapse with syntax and examples.

Description

The CSS border-collapse property defines the rendering model to use for the table borders which affects the table’s appearance.

Syntax

The syntax for the border-collapse CSS property is:

Parameters or Arguments

The rendering model to apply to the table borders. It can be one of the following:

• The border-collapse property applies to the
  element and the default is separate.
  The separated borders model renders a table such that adjacent cells have their own borders that are not shared, and the border-spacing property determines the spacing between the cells.
  The collapsed borders model renders a table such that adjacent cells share their borders.
  
  

  Browser Compatibility

  The CSS border-collapse property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 5+ (IE 5+)
  • Opera
  • Safari (WebKit)

  Example

  We will discuss the border-collapse property below, exploring examples of how to use this property in CSS.

  Let’s first look at an example of where we apply the separated borders model to our table. For example:

  The CSS would look like this:

  The HTML would look like this:

  The table using the separated borders model would look like this:

  In this CSS border-collapse example, we have set the border-collapse property to a value of separate for the

  tag which renders the table using the separated borders model (default for HTML tables). As you can see, the adjacent cells have their own distinct borders.

  Now we will change our table to use the collapsed borders model by changing the border-collapse property to collapse and see what happens:

  Now using the collapsed borders model, our table would look like this:

  As you can see, our table is rendered using the collapsed borders model which results in the adjacent cells sharing their borders. This can reduce the whitespace between the table cells and remove some of the table border styling since the borders are now shared.

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

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

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

  Значение по умолчанию	separate
  Наследование	да
  Версия CSS	CSS 2
  Синтаксис JavaScript	object.style.borderCollapse=»collapse»

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

  Свойство border-collapse поддерживается всеми основными браузерами.

  
  

  Заметка: ни одна версия Internet Explorer (включая IE не поддерживает значение inherit.

  Заметка: если не указан Doctype, свойство border-collapse может дать неожиданные результаты.

  border-collapse

  Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
  Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
  Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

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

  CSS (ЦСС)	CSS (ЦСС)1
  Значение по умолчанию	separate
  Наследуется	Нет
  Применяется	К тегу или к элементам, у которых значение свойство display установлено как table или inline-table Аналог ШТМЛ Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.ШТМЛ#propdef-border-collapse Описание Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка. Рис. 1. Вид таблицы при использовании атрибута border-collapse Синтаксис border-collapse: collapse | separate Аргументы ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 Результат данного примера показан ни рис. 2. Рис. 2. Вид таблицы при использовании параметра border-collapse Самоучитель Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка. синтаксис Значения collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. Улучшаем отображение рамок Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере. Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse . Вот так: Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину. Хотите писать JavaScript, используя современный синтаксис ES2020? Уметь тестировать свои программы? Записывайтесь на профессиональный курс по JavaScript второго уровня, проходящий c 18 ноября 2020 по 22 января 2020. До 18 ноября цена 23 900 Илон Маск рекомендует:  Что такое код ldap_get_option Понравилась статья? Поделиться с друзьями: Вам также может быть интересно Обучение программированию Эффект горящей надписи Простой огненный текст в Фотошопе Конечный результат: Ресурсы урока: Шаг 1 Создайте новый документ Обучение программированию Язык xml documents type definitions (dtd) Язык XML — практическое введение . Documents Type Definitions (DTD) В XML- документах DTD Обучение программированию Языки и грамматики простейший компилятор ГРАММАТИКА ЯЗЫКОВ ПРОГРАММИРОВАНИЯ Описанию грамматики языка предшествует описание его алфавита. Алфавит любого языка состоит Обучение программированию Эффект ледяной надписи Ледяной текст в Фотошопе Конечный результат: Ресурсы урока: 1. Создание фона Шаг 1 Создайте Обучение программированию Язык xml dom совместимые анализаторы XML-анализаторы в java XML как набор байт в памяти, запись в базе или текстовый Обучение программированию Языки описания пользовательских интерфейсов Языки описания пользовательских интерфейсов Язык описания интерфейсов Язык описания интерфейсов (IDL), используемый OMG определяет Обучение программированию Эффект линзы (watcom c) Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита, Обучение программированию Язык xml xml в microsoft internet explorer 5 0 Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language, Обучение программированию Языки программирования Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя Обучение программированию Эффект пламени По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый Обучение программированию Язык xml введение Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть Обучение программированию Якоря HTML Что такое ссылка якорь в HTML и как ее сделать? Когда мы имеем дело Обучение программированию Эффект разбитого текста Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося Обучение программированию Язык xml использование java xml обработчиков Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX, Обучение программированию Яндекс — крупнейшая поисковая система русскоязычного Интернета! Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта, Обучение программированию Эффект скручивания Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг Обучение программированию Язык xml описание технологии Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML Обучение программированию Ячейка заголовка 17 Таблицы 17.1 Введение в таблицы Таблицы представляют отношения между данными. Авторы определяют эти Обучение программированию Эффективное использование gnu make Эффективное использование gnu make Создание данного текста не имело своей целью дать полное описание Обучение программированию Язык xml практическое введение Описание данных с помощью XML Если вы программируете на Java, за последние пару лет Обучение программированию Эффективный копирайтинг, как писать копирайтинг Как написать эффективный продающий текст. Часть первая. Подготовка Грамотно написанный продающий текст позволяет превращать Обучение программированию Язык xml просмотр xml документов Чем открыть XML Web — это место, где миллионы людей ежедневно связываются друг с Обучение программированию Эффективный способ применения интерфейсов в mdi приложениях Многооконный интерфейс. Создание MDI-приложения , страница 3 Вместо дополнительных байт окна приложение может использовать Обучение программированию Язык xml стилевые таблицы xsl Отображение XML с использованием XSLT При помощи XSLT вы можете преобразовывать XML документ в