Proprietà border-collapse

La proprietà border-collapse fa sì che i doppi bordi tra le celle td o le celle th della tabella HTML (e tra il bordo della cella e la tabella stessa) si collassino e appaiano come uno solo.

Questa proprietà si applica solo alle tabelle e agli elementi con display impostato su table o inline-table. Purtroppo, non funzionerà per normali elementi blocco. Tieni presente che deve essere applicata alla tabella, e non alle sue celle.

Sintassi

selettore {
	border-collapse: collapse | separate;
}

Valori

Valore	Descrizione
`collapse`	I doppi bordi appariranno come uno solo. Ci sono effetti collaterali: la proprietà `border-spacing` e l'attributo `cellspacing` cessano di funzionare.
`separate`	Ogni cella della tabella avrà il proprio bordo (pertanto in alcuni punti i bordi saranno doppi, se lo spazio tra le celle è zero).

Valore predefinito: separate.

Esempio . Valore separate

Ora nella tabella tutti i bordi sono doppi (il bordo è impostato sia per le celle che per la tabella stessa):

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

Esempio . Valore separate

Ora il bordo è impostato per le celle, ma non per la tabella stessa. Laddove due celle hanno un bordo in comune, i bordi saranno doppi, negli altri punti - singoli:

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

Esempio . Valore collapse

Ora nella tabella tutti i bordi collasseranno e appariranno con uno spessore di 1px, come sarebbe desiderabile:

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