Table css collapse: border-collapse — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Свойство border-collapse — схлопывание границ

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

Данное свойство применяется только для таблиц и для элементов с display в значении table или inline-table. Для обычных блочных элементов оно, к большому сожалению, работать не будет. Учтите, что применять следует для таблицы, а не для ее ячеек.

Синтаксис

селектор { border-collapse: collapse | separate; }

Значения

ЗначениеОписание
collapse Двойные границы будут выглядеть как одна. Есть побочные эффекты: перестанет работать свойство border-spacing и атрибут cellspacing.
separate Каждая ячейка таблицы будет иметь свою границу (поэтому в некоторых местах границы будут двойными, если промежуток между ячейками нулевой).

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

Пример . Значение separate

Сейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>table { border-collapse: separate; width: 400px; border-spacing: 0; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

:

Пример . Значение separate

А сейчас граница задана ячейкам, но самой таблице не задана. Там, где две ячейки имеют общую границу,- границы будут двойные, в остальных местах — одиночные:

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>table { border-collapse: separate; width: 400px; border-spacing: 0; } td { border: 1px solid red; text-align: center; }

:

Пример .

Значение collapse

Сейчас в таблице все границы схлопнутся и станут выглядеть толщиной в 1px, как и хотелось бы:

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>

table { border-collapse: collapse; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

:

CSS border collapse

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

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

#table1 {
    border-collapse: separate;
}

#table2 {
    border-collapse: collapse;
}

Подробнее примеры ниже.

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

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

Значение по умолчанию:separate
Inherited:yes
Animatable:no. Читайте о animatable
Version:CSS2
Синтаксис JavaScript: object.style.borderCollapse=»collapse»

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

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

Свойство
border-collapse1.05.01.01.24.0

Синтаксис CSS

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

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

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

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

Пример

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

#table1 {
    border-collapse: separate;

    border-spacing: 10px;
}

Пример

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

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

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

Похожие страницы

CSS Справочник: CSS Table

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

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.

ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство 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 Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
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

90900 Top1 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

границ-коллапс — CSS: Каскадные таблицы стилей

Свойство CSS border-collapse определяет, имеют ли ячейки внутри

общие или отдельные границы.

Когда ячейки свернуты, значение в стиле границы для вставки ведет себя как углубление , а начало ведет себя как гребень .

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

 /* Значения ключевых слов */
граница коллапса: коллапс;
граница-коллапс: раздельная;
/* Глобальные значения */
граница коллапса: наследовать;
граница-коллапс: начальная;
граница коллапса: вернуться;
граница коллапса: обратный слой;
обрушение границы: не установлено;

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

Значения

свернуть

Смежные ячейки имеют общие границы (модель рендеринга таблицы со свернутой границей).

отдельный

Смежные ячейки имеют четкие границы (модель рендеринга таблицы с разделенными границами).

 граница-коллапс = 
 отдельно | 
 свернуть

Красочная таблица движков браузера

HTML 
 <таблица>
  <заголовок>
    border-collapse: отдельно
  
  <тело>
<таблица> <заголовок> border-collapse: свернуть <тело>
CSS 
 .
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Браузер Макет макета
Firefox Геккон
Край EdgeHTML
Сафари Вебкит
Хром Мигать
Опера Мигать
Браузер Макет макета
Firefox Геккон
Край EdgeHTML
Сафари Вебкит
Хром Мигать
Опера Мигать