Propriété border-collapse

La propriété border-collapse force les bordures doubles entre les cellules td ou les cellules th d'un tableau HTML (et entre la bordure d'une cellule et celle du tableau lui-même) à fusionner et à apparaître comme une seule.

Cette propriété s'applique uniquement aux tableaux et aux éléments avec display ayant pour valeur table ou inline-table. Malheureusement, elle ne fonctionnera pas pour les éléments bloc normaux. Notez qu'il faut l'appliquer au tableau, et non à ses cellules.

Syntaxe

sélecteur {
	border-collapse: collapse | separate;
}

Valeurs

Valeur	Description
`collapse`	Les bordures doubles apparaîtront comme une seule. Il y a des effets secondaires : la propriété `border-spacing` et l'attribut `cellspacing` cesseront de fonctionner.
`separate`	Chaque cellule du tableau aura sa propre bordure (c'est pourquoi dans certains endroits les bordures seront doubles, si l'espacement entre les cellules est nul).

Valeur par défaut : separate.

Exemple . Valeur separate

Actuellement, dans le tableau, toutes les bordures sont doubles (une bordure est définie à la fois pour les cellules et pour le tableau lui-même) :

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

Exemple . Valeur separate

Maintenant, une bordure est définie pour les cellules, mais aucune bordure n'est définie pour le tableau lui-même. Là où deux cellules partagent une bordure commune, les bordures seront doubles, dans les autres endroits - simples :

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

Exemple . Valeur collapse

Maintenant, dans le tableau, toutes les bordures vont fusionner et apparaître avec une épaisseur de 1px, comme souhaité :

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