border-collapse

Задаёт поведение границ таблицы и её ячеек.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          .separate {  border-collapse: separate;}.collapse {  border-collapse: collapse;}
          .separate {
  border-collapse: separate;
}

.collapse {
  border-collapse: collapse;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

В качестве значения для свойства border-collapse используются следующие ключевые слова:

  • separate — границы отображаются отдельно друг от друга. Это значение по умолчанию.
  • collapse — соседние границы отображаются как одна граница.

Как понять

Секция статьи "Как понять"

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