Propiedad border-collapse

Ejemplos de uso

El estándar de CSS 2.1 establece que existen dos modelos de bordes para las celdas de las tablas. El primer modelo es el "separado" separate) y hace que todas las celdas de la tabla muestren sus cuatro bordes. El segundo modelo es el "fusionado" collapse) y combina los bordes de las celdas adyacentes.

El modelo de bordes influye en la estética de los bordes de las celdas, pero es independiente de las propiedades border, border-width, border-color y border-style. El modelo de bordes se establece mediante la propiedad border-collapse.

Los navegadores utilizan por defecto el modelo de bordes separate, que hace que todas las celdas estén separadas y muestren siempre sus cuatro bordes. La tabla del siguiente ejemplo emplea el modelo separate:

A continuación se muestra el código CSS correspondiente a la tabla anterior:

table {
  border-collapse: separate;
  border-spacing:  3px;
}

Casi siempre que se utiliza la propiedad border-collapse: separate, también se emplea la propiedad border-spacing para controlar la separación entre las celdas.

En el modelo de bordes separados, todas las celdas muestran siempre sus cuatro bordes, independientemente de la separación entre las celdas. En el siguiente ejemplo se utiliza el modelo de bordes separados y se reduce la separación a 0px:

El aspecto final de la tabla anterior puede que no sea el deseado, porque los bordes de las celdas adyacentes se muestran como un borde de grosor doble, ya que en realidad son dos bordes iguales sin separación entre ellos.

El otro modelo de bordes disponible se denomina collapse y consiste en la fusión automática de todos los bordes adyacentes. A continuación se muestra la misma tabla del ejemplo anterior pero utilizando el modelo collapse:

La otra gran diferencia entre los dos modelos de bordes es que en el modelo separate las filas, grupos de filas, columnas y grupos de columnas no pueden establecer bordes.

A continuación se muestran dos tablas idénticas que utilizan diferentes modelos de bordes:

Las dos tablas del ejemplo anterior establecen los mismos bordes en todas sus filas. Sin embargo, como la primera tabla utiliza el modelo de bordes separate, los navegadores ignoran todos los bordes de sus filas.

Cuando todos los bordes son exactamente iguales, la fusión de los bordes adyacentes es trivial, ya que consiste en mostrar únicamente uno de los dos bordes existentes en la intersección de las dos celdas. Por lo tanto, en realidad cada celda sólo muestra medio borde.

Sin embargo, cuando los bordes adyacentes tienen diferentes estilos y grosores, el navegador debe determinar cuál de los dos bordes debe ser representado. El estándar de CSS 2.1 define de forma precisa el algoritmo que se sigue para determinar el borde ganador:

1. Los bordes definidos con un estilo border-style: hidden tienen la máxima prioridad. Los bordes con este estilo eliminan cualquier otro borde adyacente y por tanto, no se muestra ningún borde.
2. Los bordes definidos con el estilo border-style: none tienen la mínima prioridad. Sólo se oculta este borde si todos los demás bordes adyacentes también tienen un estilo none.
3. Si ningún borde adyacente es hidden y al menos uno de ellos no es none, siempre gana el borde más ancho.
4. Si en el caso anterior varios bordes son de la misma anchura, el ganador se determina mediante el estilo del borde. La lista de estilos de bordes ordenados de más a menos prioridad es la siguiente: double, solid, dashed, dotted, ridge, outset, groove, inset.
5. Si los bordes adyacentes sólo se diferencian en su color, la prioridad la determina el elemento que define el borde. Los bordes de las celdas son los más prioritarios, seguidos por orden de prioridad por: filas, grupos de filas, columnas, grupos de columnas y tabla.
6. Si se mantiene la igualdad entre los bordes adyacentes, gana el borde que se encuentre más a la izquierda (suponiendo que el valor de la propiedad direction de la tabla es ltr).

A continuación se muestra un ejemplo complejo de resolución de conflictos al fusionar bordes muy diferentes:

Si el navegador que utilizas para ver esta página sigue correctamente los estándares, el aspecto de la tabla anterior debe ser exactamente como el de la siguiente imagen:

A continuación se muestra el código HTML y CSS del ejemplo anterior:

<table style="border: thick solid red; border-collapse: collapse;" summary="Descripción de la tabla y su contenido">
<tbody>
  <tr style="border: medium dashed black">
    <td style="border: double blue">Celda 1 - 1</td>
    <td style="border: solid green">Celda 1 - 2</td>
    <td style="border: hidden">Celda 1 - 3</td>
  </tr>
  <tr>
    <td style="border: medium solid blue">Celda 2 - 1</td>
    <td style="border: medium solid green">Celda 2 - 2</td>
    <td>Celda 2 - 3</td>
  </tr>
  <tr style="border: dashed black">
    <td>Celda 3 - 1</td>
    <td style="border: medium dotted">Celda 3 - 2</td>
    <td>Celda 3 - 3</td>
  </tr>
</tbody>
</table>

Por último, existen tres estilos de borde que tienen un significado especial cuando se utilizan en las tablas:

• hidden, visualmente es idéntico a none, pero si se utiliza el modelo de bordes collapse, tiene la máxima prioridad e impide que se vea cualquier otro borde adyacente.
• inset, en el modelo de bordes collapse se visualiza igual que el estilo ridge.
• outset, en el modelo de bordes collapse se visualiza igual que el estilo groove.