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