Border collapse: CSS border-collapse property

Содержание

border-collapse — Справочник CSS

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад CSS Справочник Далее ❯

Пример

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

#table1 {
border-collapse: separate;
}

#table2 {
border-collapse: collapse;
}

Попробуйте сами »

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

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

Значение по умолчанию:	separate
Унаследованный:	да
Анимируемый:	нет. Прочитать о animatable
Версия:	CSS2
JavaScript синтаксис:	object.style.borderCollapse=»collapse» Попробовать

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

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

Свойство
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

❮ Назад CSS Справочник Далее ❯

ВЫБОР ЦВЕТА

ТОП Учебники

HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.

CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники

HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры

HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания.

Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

css властивість border-collapse

Головна
css
властивості
border-collapse

Власивість border-collapse встановлює, як відображати кордони навколо комірок таблиці.

Ця властивість потрібна, коли для комірок встановлені кордони, тоді в місці стику комірок буде лінія подвійної товщини. Значення

collapse змушує браузер видаляти, такі, подвійні лінії. Тоді між комірками залишться тільки один кордон, який одночасно належить обом коміркам.

Без задання в таблиці HTML використовується «розділена гранична модель». Це дає певний ефект «подвійного кордону», коли між границями кожної клітинки є пробіл, а також краю таблиці (якщо у вас також є межа елемента таблиці).

Ви можете використовувати властивість border-collapse, щоб перейти на «модель згортання кордонів». Це фактично руйнує кордони на один кордон. Тому замість того, щоб побачити «подвійну межу», ви бачите тільки одну.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

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

Властивість border-collapse може отримувати 4 значення:

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

Значення без задання:	separate
Наслідує:	Так
Анімується:	Ні
JavaScript синтаксис:	object.style.borderCollapse=»collapse»

Переглядачі

Стаціонарні переглядачі
Мобільні переглядачі

Переглядач
border-collapse	1. 0	5.0	1.0	1.2	4.0	12.0

Переглядач
border-collapse	2.3	1.0	3.0

Приклади

Приклад 1
Приклад 2
Приклад 3

Різноманітні значення і їхній вплив на таблицю

Приклад використання

Встановлення моделі стискання границь для таблиці

table { 
  border-collapse: collapse; 
}

Додаткові посилання

border-style

border-radius

border

border-bottom-left-radius

border-top-right-radius

border-bottom-right-radius

border-top-left-radius

border-top

border-bottom

border-spacing

border-right-width

border-left-width

border-right

border-left

border-right-style

border-left-style

border-top-style

border-bottom-style

border-right-color

border-left-color

border-top-color

border-bottom-color

border-color

border-top-width

border-bottom-width

border-image

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

border-width

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

❮ Назад Полное руководство по CSS Далее ❯

Пример

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

#table1 {
граница-коллапс: отдельная;
}

#таблица2 {
граница коллапса: коллапс;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

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

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

Показать демо ❯

Значение по умолчанию:	отдельный
Унаследовано:	да
Анимация:	нет. Читать о анимированном
Версия:	CSS2
Синтаксис JavaScript:	объект .style.borderCollapse=»collapse» Попробуй

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

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

Собственность
обрушение границ	1,0	5,0	1,0	1,2	4,0

Синтаксис CSS

border-collapse: отдельный|свернуть|начальный|наследовать;

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

Значение	Описание	Демо
отдельный	Границы разделены; каждая ячейка будет отображать свои собственные границы. Это по умолчанию.	Демонстрация ❯
обрушение	Границы сворачиваются в одну границу, когда это возможно (свойства border-spacing и empty-cells не действуют)	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

Пример

используется для установки пространства между ячейками:

#table1 {
граница-коллапс: отдельно;
интервал между границами: 10 пикселей;
}

Попробуйте сами »

Пример

При использовании «границы-свернуть: свернуть», ячейка, которая появляется первой в коде «выиграет»:

table, td, th {
граница: 3 пикселя сплошной красный цвет;
}

#table1 {
граница-коллапс: крах;
цвет границы: синий;
}

Попробуйте сами »

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

Учебник CSS: Таблица CSS

Ссылка HTML DOM: свойство borderCollapse

❮ Назад Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 9003 Справочник4 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

9 Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Border Collapse — Tailwind CSS

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

Collapse

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

верхнего уровня.

Государственный	Город
Индиана	Индианаполис
Огайо	Колумбус
Мичиган	Детройт

 <таблица>
  
    
      Штат
      Город
    
  
  <тело>
    
      Индиана
      Индианаполис
    
    
      Огайо
      Колумбус
    
    
      Мичиган
      Детройт
    
  
  <таблица>
  
    
      Штат
      Город
    
  
  <тело>
    
      Индиана
      Индианаполис
    
    
      Огайо
      Колумбус
    
    
      Мичиган
      Детройт

Separate

Используйте border-separate , чтобы заставить каждую ячейку отображать свои собственные отдельные границы.

Государственный	Город
Индиана	Индианаполис
Огайо	Колумбус
Мичиган	Детройт

 <таблица>
  
    
      Штат
      Город
    
  
  <тело>
    
      Индиана
      Индианаполис
    
    
      Огайо
      Колумбус
    
    
      Мичиган
      Детройт
    
  
  <таблица>
  
    
      Штат
      Город
    
  
  <тело>
    
      Индиана
      Индианаполис
    
    
      Огайо
      Колумбус
    
    
      Мичиган
      Детройт

Условное применение

Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях, используя модификаторы вариантов.

border-collapse — Справочник CSS

Пример

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

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

CSS Синтаксис

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

Примеры

Пример

Пример

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

ВЫБОР ЦВЕТА

ТОП Учебники

ТОП Справочники

ТОП Примеры

css властивість border-collapse

Синтакс

Переглядачі

Приклади

Додаткові посилання

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

Пример

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

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

Синтаксис CSS

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

Другие примеры

Пример

Пример

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

ВЫБОР ЦВЕТА

Лучшие учебники

Border Collapse — Tailwind CSS

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

Collapse

Separate

Условное применение

Наведение, фокус и другие состояния

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

Рубрики

Border collapse: CSS border-collapse property

border-collapse — Справочник CSS

Пример

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

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

CSS Синтаксис

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

Примеры

Пример

Пример

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

ВЫБОР ЦВЕТА

ТОП Учебники

ТОП Справочники

ТОП Примеры

css властивість border-collapse

Синтакс

Переглядачі

Приклади

Додаткові посилання

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

Пример

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

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

Синтаксис CSS

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

Другие примеры

Пример

Пример

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

ВЫБОР ЦВЕТА

Лучшие учебники

Border Collapse — Tailwind CSS

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

Collapse

​Separate

​Условное применение

​Наведение, фокус и другие состояния

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

Рубрики

Separate

Условное применение

Наведение, фокус и другие состояния