Propiedad border-collapse

La propiedad border-collapse hace que los bordes dobles entre las celdas td o las celdas th de una tabla HTML (y entre el borde de la celda y el de la propia tabla) se colapsen y se vean como uno solo.

Esta propiedad se aplica solo a las tablas y a los elementos con display con valor table o inline-table. Para los elementos de bloque normales, por desgracia, no funcionará. Tenga en cuenta que debe aplicarse a la tabla, no a sus celdas.

Sintaxis

selector {
	border-collapse: collapse | separate;
}

Valores

Valor	Descripción
`collapse`	Los bordes dobles se verán como uno solo. Hay efectos secundarios: dejará de funcionar la propiedad `border-spacing` y el atributo `cellspacing`.
`separate`	Cada celda de la tabla tendrá su propio borde (por lo que en algunos lugares los bordes serán dobles, si el espacio entre las celdas es cero).

Valor por defecto: separate.

Ejemplo . Valor separate

Actualmente en la tabla todos los bordes son dobles (el borde está definido tanto para las celdas como para la propia tabla):

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

Ejemplo . Valor separate

Y ahora el borde está definido para las celdas, pero no para la propia tabla. Donde dos celdas tienen un borde común, los bordes serán dobles, en los demás lugares - 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;
}

Ejemplo . Valor collapse

Ahora en la tabla todos los bordes se colapsarán y se verán con un grosor de 1px, como se deseaba:

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