Egenskaben border-collapse

Egenskaben border-collapse får dobbelte kanter mellem celler td eller celler th i en HTML tabel (og mellem cellens kant og selve tabellen) til at kollapse og se ud som én.

Denne egenskab anvendes kun for tabeller og for elementer med display sat til værdien table eller inline-table. For almindelige blokelementer vil det, desværre, ikke virke. Bemærk, at den skal anvendes på tabellen, og ikke på dens celler.

Syntaks

selektor {
	border-collapse: collapse | separate;
}

Værdier

Værdi	Beskrivelse
`collapse`	Dobbelte kanter vil se ud som én. Der er bivirkninger: egenskaben `border-spacing` og attributten `cellspacing` vil ophøre med at virke.
`separate`	Hver celle i tabellen vil have sin egen kant (derfor vil kanterne på nogle steder være dobbelte, hvis afstanden mellem cellerne er nul).

Standardværdi: separate.

Eksempel . Værdien separate

Lige nu er alle kanter i tabellen dobbelte (kant er angivet både for cellerne og for selve tabellen):

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

Eksempel . Værdien separate

Her er kanten angivet for cellerne, men ikke for selve tabellen. Der hvor to celler deler en fælles kant, vil kanterne være dobbelte, på de andre steder - enkelt:

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

Eksempel . Værdien collapse

Nu vil alle kanter i tabellen kollapse og få en tykkelse på 1px, som ønsket:

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