border-collapse

border-collapse es la propiedad CSS que decide el modelo de bordes de una tabla: si las celdas adyacentes comparten un único borde fusionado, o si cada celda conserva su propio borde independiente con espacio entre ellas. Es casi siempre lo primero que se declara al estilar una tabla, porque el valor por defecto del navegador (separate) produce ese doble borde característico de las tablas sin estilo — dos líneas juntas donde una celda termina y la siguiente empieza — que rara vez es lo que se busca en un diseño moderno.

La diferencia entre los dos modelos no es solo visual: afecta cómo funciona border-spacing, si empty-cells tiene efecto, y si border-radius puede aplicarse a las celdas. Con collapse, los bordes de las celdas vecinas se resuelven en un único trazo usando un algoritmo de prioridad; con separate, cada celda vive en su propio espacio y el espacio entre ellas lo controla border-spacing. Entender qué modelo está activo es fundamental para evitar gotchas de estilizado que parecen inexplicables.

Esta propiedad se aplica al elemento <table>, no a las celdas individuales. Un error frecuente es ponerla en td o th — no tiene efecto ahí. Una vez declarada en table, afecta a todas las celdas y bordes de la tabla.

Sintaxis

/* Valores posibles */
table { border-collapse: separate; }   /* default */
table { border-collapse: collapse; }

Valores

separate (valor por defecto)

Cada celda tiene su propio borde, independiente de las celdas adyacentes. Entre celdas vecinas se forman dos bordes paralelos — uno por el borde derecho de la celda izquierda y otro por el borde izquierdo de la celda derecha. El espacio entre esos bordes lo controla border-spacing. Con separate, también tienen efecto empty-cells y caption-side.

table {
  border-collapse: separate;
  border-spacing: 4px;  /* espacio entre celdas */
}

collapse

Los bordes de celdas adyacentes se fusionan en uno solo. No hay espacio entre celdas; cuando dos bordes se encuentran, el navegador resuelve cuál “gana” según el algoritmo de prioridad de bordes colapsados (ver sección sobre resolución de bordes más abajo). Con collapse, las propiedades border-spacing y empty-cells se ignoran completamente — no tienen efecto.

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid #cbd5e1;
}

Propiedades relacionadas (solo con separate)

border-spacing

Controla el espacio entre las celdas cuando border-collapse: separate. Acepta uno o dos valores:

table {
  border-collapse: separate;
  border-spacing: 8px;         /* horizontal y vertical igual */
  border-spacing: 12px 4px;   /* horizontal · vertical */
}

Si se usa border-collapse: collapse, border-spacing se ignora completamente — es uno de los gotchas más frecuentes.

empty-cells

Controla si las celdas vacías (sin contenido) muestran su borde y fondo o se ocultan. Solo tiene efecto con separate.

table {
  border-collapse: separate;
  empty-cells: hide;
}

Con border-collapse: collapse, empty-cells no tiene efecto — las celdas vacías siempre participan del modelo de bordes colapsados.

caption-side

Controla si el <caption> de la tabla aparece arriba o abajo de la tabla. No depende de border-collapse — funciona con ambos modelos.

table {
  caption-side: bottom;
}

Algoritmo de resolución de bordes colapsados

Con collapse, cuando dos bordes se encuentran en el límite entre celdas (o entre una celda y el borde exterior de la tabla), el navegador elige uno de los dos según estas reglas de prioridad (de mayor a menor):

1. border-style: hidden — siempre gana; suprime el borde.
2. Mayor border-width — el borde más grueso gana.
3. Estilo del borde — en orden de prioridad: double > solid > dashed > dotted > ridge > outset > groove > inset.
4. Posición de origen — celdas tienen prioridad sobre filas, filas sobre <thead>/<tbody>/<tfoot>, secciones sobre la <table> misma.

En la práctica, para evitar comportamientos inesperados con collapse, conviene declarar el mismo estilo de borde en todas las celdas y dejar que el colapso simplemente los fusione.

Cuándo usarlo

Notas, gotchas e interacción

• border-radius no funciona en celdas con collapse. Es el gotcha más frecuente: si intentás redondear las esquinas de una tabla con border-collapse: collapse, el radio no se aplica. Los bordes fusionados ignoran el border-radius de las celdas individuales. Para tablas redondeadas, usá separate y aplicá border-radius a la <table> misma.
• border-spacing y empty-cells se ignoran con collapse. Si declarás border-collapse: collapse y luego border-spacing: 8px, no pasa nada — border-spacing se descarta silenciosamente. Es fácil olvidarlo al copiar estilos de una tabla a otra con diferente modelo.
• Esta propiedad va en la <table>, no en <td> ni <th>. Ponerla en las celdas no tiene efecto alguno — el modelo de bordes lo controla el elemento tabla raíz.
• El valor separate es el default del navegador, pero rara vez es lo que se quiere en producción. Las tablas sin estilos tienen el doble borde por este motivo. Si trabajás con un reset CSS o con frameworks como Tailwind, verificá si ya setean border-collapse: collapse globalmente.
• Interacción con border en celdas: con collapse, los bordes de <td> y <th> se fusionan con los de sus vecinas y con el borde exterior de la tabla. El color y grosor declarado en cada celda compite con los de las vecinas según el algoritmo de prioridad. Ver la entrada de border para el detalle de los tipos de línea.

Vigente / legacy

border-collapse es baseline widely — soportada en todos los navegadores modernos y en IE6+. No hay forma legacy alternativa. El atributo HTML cellspacing="0" que se usaba en HTML4 para eliminar el espacio entre celdas es el equivalente de border-collapse: collapse + border-spacing: 0, pero está obsoleto — reemplazalo con CSS.