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

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

Внимание! Применяйте свойство для таблиц, а не для ее ячеек (для ячеек просто не будет работать).

Синтаксис

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

Значения

Значение Описание
collapse Двойные границы будут выглядеть как одна.

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

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

Примеры

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

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

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

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

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

Результат выполнения кода:

1 2 3
4 5 6
7 8 9

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

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

Результат выполнения кода:

1 2 3
4 5 6
7 8 9

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

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

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

Результат выполнения кода:

1 2 3
4 5 6
7 8 9