table-layout

table-layout controla el algoritmo que usa el navegador para calcular el ancho de las columnas de una tabla. La diferencia entre sus dos valores no es solo de velocidad: cambia fundamentalmente de dónde viene la información que determina el ancho. Con auto (el valor por defecto), el navegador necesita leer el contenido de todas las celdas antes de poder calcular cuánto espacio asignar a cada columna — el contenido manda, y las columnas se ajustan a él. Con fixed, el ancho se decide únicamente con la primera fila y los valores de width explícitos; el resto del contenido no influye.

Esta distinción tiene consecuencias importantes en la práctica. Con auto, una celda con texto largo o una imagen ancha puede expandir su columna más allá de lo esperado, rompiendo layouts cuidadosamente diseñados. Con fixed, el ancho de la tabla y sus columnas es predecible y estable sin importar el contenido — lo que permite truncar texto largo con text-overflow: ellipsis o word-break, algo imposible con auto. El precio de fixed es que el contenido que exceda el ancho declarado se desbordará o se truncará, y que requiere width declarado en la tabla o en las celdas de la primera fila.

La propiedad se aplica al elemento <table>. Junto con border-collapse, es una de las dos propiedades CSS de tablas que controlan el comportamiento global de la tabla (no de las celdas). Ambas van en el mismo selector y suelen declararse juntas al inicio del bloque de estilos de cualquier tabla.

Sintaxis

/* Valores posibles */
table { table-layout: auto; }    /* default */
table { table-layout: fixed; }

Valores

auto (valor por defecto)

El navegador recorre todas las celdas de la tabla antes de renderizar, mide el contenido de cada una, y calcula el ancho de cada columna para acomodar el contenido más largo. El resultado es que cada columna ocupa exactamente el espacio que necesita su contenido — conveniente pero impredecible cuando el contenido varía.

Con auto, el width declarado en <td> o <th> funciona más como un sugerencia que como una regla: si el contenido es más largo, la celda se expande más allá del width declarado. Esto hace que auto sea más difícil de controlar en tablas con datos dinámicos o desconocidos.

table {
  table-layout: auto;
  width: 100%;
}

fixed

El ancho de cada columna se determina únicamente con la información de la primera fila y los valores de width explícitos en la tabla o en <col>/<colgroup>. El resto del contenido de la tabla no se lee para calcular el ancho — el navegador puede renderizar la tabla al recibir la primera fila, sin esperar el resto.

Para que fixed funcione correctamente, la tabla necesita un width declarado (generalmente width: 100%). Sin él, el resultado puede ser impredecible. Las columnas sin width explícito se reparten el espacio sobrante en partes iguales.

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

/* Anchos por columna definidos en la primera fila */
th:first-child { width: 80px; }
th:nth-child(2) { width: 200px; }
/* La tercera columna ocupa el resto automáticamente */

Receta para truncado de texto en tablas

table-layout: fixed habilita truncado de texto con text-overflow: ellipsis. Sin fixed, el truncado no funciona porque la columna se expande para acomodar el contenido en lugar de recortarlo.

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

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

El truco de max-width: 0 en la celda es necesario en algunos navegadores para que overflow: hidden surta efecto dentro del modelo de tabla — la celda necesita un ancho de referencia para saber cuándo truncar.

Cuándo usarlo

Notas, gotchas e interacción

• fixed necesita width en la tabla. Sin width: 100% o un valor explícito en <table>, el comportamiento de fixed puede ser inesperado. La tabla podría colapsar al ancho mínimo de su contenido. Siempre declaralos juntos.
• text-overflow: ellipsis no funciona con auto. Con auto, la columna se expande para acomodar el texto y nunca trunca. El truncado requiere fixed + overflow: hidden + white-space: nowrap + text-overflow: ellipsis en las celdas.
• Con fixed, el contenido largo se desborda si no se maneja. Si no declarás overflow: hidden ni white-space: nowrap, el texto de una celda puede sobresalir visualmente del borde de su columna y solaparse con la siguiente. Es un desborde invisible — la celda no se expande pero el texto sí sale.
• Esta propiedad va en la <table>, no en <td> ni <th>. Igual que border-collapse, table-layout controla el algoritmo global de la tabla y se aplica al elemento raíz.
• Interacción con width en celdas: con auto, el width es una sugerencia; con fixed, el width declarado en la primera fila o en <col> es vinculante. Ver la entrada de width para el detalle de cómo se resuelve el ancho en el box model.
• vertical-align en celdas: aunque no es una propiedad de tabla (pertenece a la familia de alineación), vertical-align es especialmente útil en <td> y <th> para controlar la alineación vertical del contenido dentro de la celda (top, middle, bottom). No se ve afectado por table-layout.

Vigente / legacy

table-layout es baseline widely — soportada en todos los navegadores modernos y en versiones antiguas desde IE5+. No hay alternativa legacy. El atributo width en <table> o <td> de HTML4 es el equivalente parcial de table-layout: fixed con anchos explícitos, pero está obsoleto — reemplazalo con CSS.