Eienskap border-collapse

Die eienskap border-collapse dwing dubbel grense tussen selle van td of selle van th 'n HTML tabel (en tussen die selgrens en die tabel self) om saam te trek en as een te lyk.

Hierdie eienskap word slegs toegepas op tabelle en op elemente met display met die waarde table of inline-table. Vir gewone blok elemente sal dit, tot groot spyt, nie werk nie. Let op, dit moet op die tabel toegepas word, en nie op sy selle nie.

Sintaksis

selektor {
	border-collapse: collapse | separate;
}

Waardes

Waarde	Beskrywing
`collapse`	Dubbel grense sal as een lyk. Daar is newe-effekte: die eienskap `border-spacing` en die attribuut `cellspacing` sal ophou werk.
`separate`	Elke tabel sel sal sy eie grens hê (daarom sal grense op sommige plekke dubbel wees, as die spasie tussen selle nul is).

Standaard waarde: separate.

Voorbeeld . Waarde separate

Tans is alle grense in die tabel dubbel (grens toegepas op beide die selle en die tabel self):

<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

Maar nou is die grens op die selle toegepas, maar nie op die tabel self nie. Waar twee selle 'n grens deel, - sal die grense dubbel wees, op ander plekke - 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

Nou sal alle grense in die tabel saamtrek en 'n dikte van 1px toon, soos wat mens sou wou hê:

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