Css collapse: border-collapse — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

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

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

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

❮ Предыдущий Далее ❯

Иногда два поля сливаются в одно.

Свертывание полей

Верхнее и нижнее поля элементов иногда сворачиваются в одно поле, равное наибольшему из двух полей.

Этого не происходит на левом и правом полях! Только верхнее и нижнее поля!

Посмотрите на следующий пример:

Пример

Демонстрация схлопывания полей:

h2 {
  margin: 0 0 50px 0;
}

h3 {
  margin: 20px 0 0 0;
}

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

В приведенном выше примере элемент

имеет нижнее поле 50px и

Элемент имеет верхнее поле, установленное на 20px.

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

и

будет в общей сложности 70px (50px + 20px). Но из-за коллапса маржи, фактическое поле в конечном итоге составляет 50 пикселей.

Проверьте себя с помощью упражнений

Упражнение:

Добавьте левое поле в 20 пикселей к элементу

. 

<стиль>
ч2 {
  : 20 пикселей;
}

<тело>
   
Это заголовок
 
  
Это абзац

  
Это абзац

Начать упражнение

Все свойства полей CSS

Свойство Описание
поля Сокращенное свойство для установки всех свойств поля в одном объявлении
нижняя граница Устанавливает нижнее поле элемента
поле слева Устанавливает левое поле элемента
поле справа Устанавливает правое поле элемента
верхнее поле Устанавливает верхнее поле элемента

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

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

900 Справочник по 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

ФОРУМ | О

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

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

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

border-collapse — CSS: Каскадные таблицы стилей

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

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

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

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

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

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

Значения

свернуть

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

отдельный

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

Initial value separate
Applies to table and inline-table elements
Inherited yes
Computed value as specified
Тип анимации дискретный
 border-collapse = 
 отдельный | 
 свернуть

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

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

 

  

      Браузер
      Макет макета
    

    

      Firefox
      Геккон
    

    

      Край
      EdgeHTML
    

    

      Сафари
      Вебкит
    

    

      Хром
      Мигать
    

    

      Опера
      Мигать
    

  

  

      Браузер
      Макет макета
    

    

      Firefox
      Геккон
    

    

      Край
      EdgeHTML
    

    

      Сафари
      Вебкит
    

    

      Хром
      Мигать
    

    

      Опера
      Мигать