Уласцівасць 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;
}