Propiedades CSS para tablas

Las tablas HTML tienen un modelo de rendering propio en CSS, distinto al de los demás elementos. Cuando el navegador encuentra un <table>, activa un algoritmo de layout específico que organiza las celdas en una cuadrícula bidimensional y gestiona los bordes entre ellas de manera especial. CSS expone ese algoritmo a través de un conjunto de propiedades dedicadas — las de esta categoría — que controlan aspectos que no tienen equivalente en el box model general.

Lo más importante que hay que entender al trabajar con tablas en CSS es que el comportamiento por defecto del navegador rara vez es lo que querés. Los bordes se separan entre sí dejando un doble borde visual. El ancho de cada columna se calcula en función del contenido de todas las celdas, lo que hace el layout impredecible con datos variables. Ambos comportamientos son configurables: son exactamente lo que border-collapse y table-layout controlan.

Una aclaración que conviene hacer explícita: el display: table de CSS permite que cualquier elemento se comporte como una tabla en términos de layout. Esta técnica fue popular antes de Flexbox y Grid, pero hoy es código legacy. Las propiedades de esta categoría son para tablas de datos HTML (<table>, <tr>, <td>, <th>), no para crear layouts con display: table.

Cómo funciona

border-collapse — el gotcha central

Por defecto, cada celda de una tabla tiene su propio border: si dos celdas adyacentes tienen border: 1px solid, el espacio entre ellas muestra dos bordes (uno por celda), con un hueco entre ambos controlado por border-spacing. Este es el comportamiento de border-collapse: separate (el valor inicial).

border-collapse: collapse fusiona los bordes adyacentes en uno solo. En lugar de dos bordes separados por un hueco, el algoritmo de “borders conflictivos” elige un único border ganador entre todos los candidatos (el más grueso, el de mayor especificidad, o el más cercano al <td> frente al <table>). El resultado visual es una cuadrícula limpia sin dobles bordes ni huecos.

Gotcha: con border-collapse: collapse, la propiedad border-radius en el elemento <table> no funciona. Los bordes colapsados no pueden tener esquinas redondeadas porque el modelo de colapsado asume bordes rectos. Si necesitás una tabla con esquinas redondeadas, debés usar border-collapse: separate y controlar los bordes manualmente.

Ver border-collapse.

table-layout — ancho de columnas

table-layout: auto (el valor inicial) hace que el navegador calcule el ancho de cada columna después de leer todo el contenido de la tabla. El ancho de cada columna se determina por el contenido más ancho de esa columna. Esto hace que el layout sea exactamente proporcional al contenido, pero también impredecible: una celda con texto muy largo expande toda la columna, y el renderizado solo se completa cuando el browser ha procesado todas las filas.

table-layout: fixed hace que el browser calcule el ancho de las columnas solo a partir de la primera fila (o de los col/colgroup declarados). Si el <table> tiene un width declarado, las columnas se distribuyen uniformemente por defecto. El resultado es un layout predecible y más rápido de renderizar, porque el browser no necesita esperar al resto de las filas. El texto que no cabe se gestiona con overflow: hidden + text-overflow: ellipsis en las celdas.

En la práctica, table-layout: fixed con width: 100% en el <table> es el punto de partida recomendado para tablas con datos variables — evita que una celda con contenido largo rompa el layout de toda la tabla.

Ver table-layout.

Notas de uso

border-collapse: collapse debería ser el default en cualquier tabla de datos: es la expectativa visual natural y produce el HTML más limpio. Si vas a agregar estilos visuales a las filas (:hover, :nth-child), funciona mejor con collapse.

Para el ancho de columnas, la combinación típica en tablas responsive es:

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

td, th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Esto da un layout predecible donde el ancho se distribuye equitativamente y las celdas con texto largo muestran … en lugar de romper el layout.