Egenskapen border-collapse

Egenskapen border-collapse får doble rammer mellom celler td eller celler th i en HTML tabell (og mellom cellens ramme og selve tabellen) til å kollapse og se ut som én.

Denne egenskapen gjelder bare for tabeller og for elementer med display satt til verdien table eller inline-table. For vanlige blokkelementer vil det, dessverre, ikke fungere. Vær oppmerksom på at den skal brukes på tabellen, ikke på cellene.

Syntaks

selector {
	border-collapse: collapse | separate;
}

Verdier

Verdi	Beskrivelse
`collapse`	Doble rammer vil se ut som én. Det er bivirkninger: egenskapen `border-spacing` og attributtet `cellspacing` vil slutte å fungere.
`separate`	Hver celle i tabellen vil ha sin egen ramme (derfor vil rammene være doble på noen steder, hvis avstanden mellom cellene er null).

Standardverdi: separate.

Eksempel . Verdien separate

Nå er alle rammene i tabellen doble (ramme er satt både på cellene og på 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 . Verdien separate

Nå er rammen satt på cellene, men ikke på selve tabellen. Der hvor to celler deler en felles ramme, vil rammene være doble, på andre steder - enkle:

<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 . Verdien collapse

Nå vil alle rammer i tabellen kollapse og se ut med en tykkelse på 1px, slik man ønsker seg:

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