Propiedad CSS table-layout

La propiedad CSS table-layout establece el algoritmo que usa el navegador para calcular el ancho de las celdas, filas y columnas de una tabla. Tiene dos algoritmos posibles — auto y fixed — y la elección entre ellos cambia tanto el tamaño de la tabla como la velocidad de renderizado.

Esta página explica cómo funciona cada algoritmo, cuándo usar fixed y las advertencias (como el desbordamiento de texto) que conlleva.

Cómo funcionan los dos algoritmos

auto (el valor predeterminado) deja que el contenido decida el ancho de las columnas. El navegador debe leer cada celda de cada fila antes de poder distribuir nada; luego amplía cada columna para que quepa su fragmento de contenido más largo. Esto produce una tabla de aspecto natural, pero también significa que puede desplazarse mientras llega más contenido, y las palabras muy largas pueden estirar una columna más de lo deseado.

fixed ignora el contenido de la mayoría de las celdas y dimensiona las columnas a partir del propio width de la tabla, los anchos de columna explícitos (en las celdas de la primera fila o en elementos <col>), además de los bordes y el espaciado entre celdas. Como la distribución ya no depende de cada celda, el navegador puede renderizar la tabla en un único paso.

Hay dos razones prácticas para elegir fixed:

Rendimiento. Con auto, una tabla grande no puede pintarse hasta que toda la tabla haya sido analizada y medida. fixed renderiza fila a fila a medida que se transmite, por lo que una tabla larga aparece más rápido y la página se siente más ágil al cargar.
Predictibilidad. Los anchos de columna se mantienen exactamente donde los colocas y no cambian cuando el contenido de las celdas varía — útil para tablas de datos con una estructura conocida.

La contrapartida: con fixed, el contenido más ancho que su columna no la amplía. Por defecto, se desborda de la celda. Generalmente se combina fixed con word-wrap / overflow-wrap, text-overflow u overflow para controlar qué ocurre con el contenido que no cabe.

Valor inicial	auto
Se aplica a	Elementos table e inline-table.
Heredable	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	object.style.tableLayout = "fixed";

Sintaxis

Sintaxis CSS de table-layout

table-layout: auto | fixed | initial | inherit;

Ejemplos

Ejemplo de la propiedad table-layout con el valor "fixed":

Ejemplo de código CSS table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 40%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 40%</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad table-layout con los valores "auto" y "fixed":

Ejemplo de valores CSS table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 250px;
      }
      table.t2 {
        table-layout: auto;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 250px</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Con table-layout: fixed, la primera tabla mantiene sus tres columnas iguales de 250px de ancho sin importar cuánto se alarguen los nombres de las ciudades, mientras que la tabla con auto se estira para encajar "Saint Petersburg". Esta es la diferencia fundamental: fixed respeta los anchos definidos, auto respeta el contenido.

Controlar el desbordamiento con table-layout: fixed

Dado que las columnas fixed no crecen para ajustarse al contenido largo, una palabra más larga que la columna se sale de la celda. La solución es ajustarla o recortarla. El fragmento a continuación muestra tres enfoques comunes uno al lado del otro:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        table-layout: fixed;
        width: 300px;
        border-collapse: collapse;
      }
      td {
        border: 2px solid #666;
        width: 100px;
        padding: 4px;
      }
      .clip {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .wrap {
        overflow-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Overflows by default</td>
        <td class="clip">Supercalifragilisticexpialidocious</td>
        <td class="wrap">Supercalifragilisticexpialidocious</td>
      </tr>
    </table>
  </body>
</html>

La celda del centro recorta la palabra larga con puntos suspensivos (text-overflow: ellipsis), mientras que la celda de la derecha la divide en varias líneas (overflow-wrap: break-word).

Valores

Valor	Descripción	Pruébalo
auto	Usa un algoritmo de distribución automático cuando la tabla y sus celdas se adaptan al contenido. Este es el valor predeterminado de esta propiedad.	Pruébalo »
fixed	Usa el algoritmo de tabla fija. El ancho de la tabla, los elementos col y la primera fila de celdas determinan los anchos de la tabla y las columnas.	Pruébalo »
initial	Establece la propiedad a su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

table-layout funciona junto con otras propiedades CSS que dan estilo a las tablas:

border-collapse — elige entre bordes de celda separados o colapsados.
border-spacing — establece el espacio entre celdas cuando los bordes están separados.
empty-cells — muestra u oculta bordes y fondos en celdas sin contenido.
width — establece el ancho total de la tabla sobre el que se basa el algoritmo fixed.
white-space — controla el ajuste del texto dentro de celdas de ancho fijo.

Práctica

¿Qué hace la propiedad CSS table-layout?

Permite determinar el ancho de visualización de las columnas en la página web.Permite cambiar el estilo de fuente del texto en la tabla.Establece el algoritmo de distribución que se usará para una tabla.Cambia el color de fondo de la tabla.Define el estilo del borde de la tabla.