Proprietatea border-collapse

Proprietatea border-collapse face ca marginile duble dintre celulele td sau celulele th ale tabelului HTML (și între marginea celulei și cea a tabelului însuși) să se colapseze și să arate ca una singură.

Această proprietate se aplică numai tabelelor și elementelor cu display setat la valoarea table sau inline-table. Pentru elementele bloc normale, din păcate, nu va funcționa. Rețineți că trebuie aplicat tabelului, nu celulelor sale.

Sintaxă

selector {
	border-collapse: collapse | separate;
}

Valori

Valoare	Descriere
`collapse`	Marginile duble vor arăta ca una singură. Există efecte secundare: proprietatea `border-spacing` și atributul `cellspacing` nu vor mai funcționa.
`separate`	Fiecare celulă a tabelului va avea propria sa margine (de aceea în unele locuri marginile vor fi duble, dacă spațiul dintre celule este zero).

Valoarea implicită: separate.

Exemplu . Valoarea separate

Acum în tabel toate marginile sunt duble (marginea este setată atât celulelor, cât și tabelului însuși):

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

Exemplu . Valoarea separate

Acum marginea este setată celulelor, dar tabelului însuși nu este setată. Acolo unde două celule au o margine comună, marginile vor fi duble, în restul locurilor - simple:

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

Exemplu . Valoarea collapse

Acum în tabel toate marginile se vor colapsa și vor arăta cu grosimea de 1px, așa cum ne-am dori:

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