Eigenschaft border-collapse

Die Eigenschaft border-collapse bewirkt, dass doppelte Ränder zwischen den Zellen td oder den Zellen th einer HTML Tabelle (und zwischen dem Rand der Zelle und der Tabelle selbst) kollabieren und wie ein einziger aussehen.

Diese Eigenschaft wird nur für Tabellen und für Elemente mit display im Wert table oder inline-table angewendet. Für normale Blockelemente wird es, leider, nicht funktionieren. Beachten Sie, dass sie für die Tabelle und nicht für ihre Zellen angewendet werden sollte.

Syntax

Selektor {
	border-collapse: collapse | separate;
}

Werte

Wert	Beschreibung
`collapse`	Doppelte Ränder werden wie ein einziger aussehen. Es gibt Nebeneffekte: Die Eigenschaft `border-spacing` und das Attribut `cellspacing` werden nicht mehr funktionieren.
`separate`	Jede Tabellenzelle hat ihren eigenen Rand (daher werden die Ränder an einigen Stellen doppelt erscheinen, wenn der Abstand zwischen den Zellen null ist).

Standardwert: separate.

Beispiel . Wert separate

Aktuell sind alle Ränder in der Tabelle doppelt (der Rand ist sowohl den Zellen als auch der Tabelle selbst zugewiesen):

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

Beispiel . Wert separate

Jetzt ist der Rand den Zellen zugewiesen, aber der Tabelle selbst nicht. Dort, wo zwei Zellen eine gemeinsame Grenze haben, werden die Ränder doppelt sein, an anderen Stellen - einfach:

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

Beispiel . Wert collapse

Jetzt werden alle Ränder in der Tabelle kollabieren und erscheinen mit einer Dicke von 1px, wie gewünscht:

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