Właściwość border-collapse

Właściwość border-collapse powoduje, że podwójne obramowania między komórkami td lub komórkami th HTML tabeli (oraz między obramowaniem komórki a samej tabeli) scalają się i wyglądają jak jedno.

Ta właściwość dotyczy tylko tabel oraz elementów z display o wartości table lub inline-table. Dla zwykłych elementów blokowych, niestety, nie będzie działać. Należy pamiętać, że należy ją zastosować dla tabeli, a nie dla jej komórek.

Składnia

selektor {
	border-collapse: collapse | separate;
}

Wartości

Wartość	Opis
`collapse`	Podwójne obramowania będą wyglądać jak jedno. Istnieją efekty uboczne: przestanie działać właściwość `border-spacing` oraz atrybut `cellspacing`.
`separate`	Każda komórka tabeli będzie miała swoje własne obramowanie (dlatego w niektórych miejscach obramowania będą podwójne, jeśli odstęp między komórkami jest zerowy).

Wartość domyślna: separate.

Przykład . Wartość separate

Teraz w tabeli wszystkie obramowania są podwójne (obramowanie nadane zarówno komórkom, jak i samej tabeli):

<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;
}

Przykład . Wartość separate

A teraz obramowanie nadano komórkom, ale samej tabeli nie nadano. Tam, gdzie dwie komórki mają wspólną granicę, - obramowania będą podwójne, w pozostałych miejscach - pojedyncze:

<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;
}

Przykład . Wartość collapse

Teraz w tabeli wszystkie obramowania scalą się i będą wyglądać na grubości 1px, tak jak byśmy chcieli:

<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;
}