Eigenschap border-collapse

De eigenschap border-collapse zorgt ervoor dat dubbele randen tussen cellen van td of cellen van th in een HTML tabel (en tussen de rand van een cel en de tabel zelf) samengevoegd worden en er als één uit zien.

Deze eigenschap is alleen van toepassing op tabellen en op elementen met display ingesteld op table of inline-table. Voor gewone blokelementen zal het, helaas, niet werken. Houd er rekening mee dat je het moet toepassen op de tabel, en niet op de cellen ervan.

Syntaxis

selector {
	border-collapse: collapse | separate;
}

Waarden

Waarde	Beschrijving
`collapse`	Dubbele randen zullen er als één uitzien. Er zijn neveneffecten: de eigenschap `border-spacing` en het attribuut `cellspacing` werken niet meer.
`separate`	Elke cel in de tabel heeft zijn eigen rand (daarom zullen de randen op sommige plaatsen dubbel zijn, als de tussenruimte tussen cellen nul is).

Standaardwaarde: separate.

Voorbeeld . Waarde separate

Momenteel zijn alle randen in de tabel dubbel (rand ingesteld voor zowel cellen als de tabel zelf):

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

Voorbeeld . Waarde separate

Nu is de rand ingesteld voor de cellen, maar niet voor de tabel zelf. Waar twee cellen een grens delen, zullen de randen dubbel zijn, op andere plaatsen - enkel:

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

Voorbeeld . Waarde collapse

Nu zullen alle randen in de tabel samenvouwen en eruitzien met een dikte van 1px, zoals gewenst:

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