Curso de CSS / tablas: bordes, tamaños y table-layout

El diseño de la tabla CSS distribuye el espacio de las columnas según las reglas de tamaño de la tabla y el contenido. table-layout: auto considera el contenido de las celdas, mientras que el diseño fijo puede hacer que el tamaño de las columnas sea más predecible cuando la tabla tiene un ancho explícito.

Separa el ancho de la tabla y el relleno de las celdas

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

th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

width: 100% indica a la tabla que se ajuste según el ancho de su elemento padre. El espacio dentro de la celda se establece con padding, y el borde se establece con border. border-collapse: collapse es un método para mostrar los bordes de celdas adyacentes fusionándolos. Establecer el ancho de la tabla y establecer saltos de línea en el contenido son cosas separadas.

Una tabla con width: 100% no siempre cabe dentro de su elemento padre. El contenido que no se puede envolver o un ancho mínimo grande pueden hacer que la tabla o el contenido de la celda sea más ancho. En tablas de datos típicas, es seguro dejar que las alturas de las celdas crezcan para ajustarse a la longitud de las frases. Si se da una altura fija, es necesario verificar la truncación al aumentar el tamaño del texto o agregar contenido.

Distribuye las columnas según su contenido

<colgroup>
  <col style="width: 30%;">
  <col style="width: 70%;">
</colgroup>

El ejercicio divide el nombre corto del ítem y la descripción larga en dos columnas. Se usa una proporción 30:70 para dar más espacio a la descripción. Si los datos reales consisten en fechas, precios, descripciones largas, etc., distribuye el espacio según la función de cada columna. Si la colocación automática predeterminada es suficientemente legible, no es necesario forzar la proporción.

Al especificar un porcentaje de toda la columna, como se muestra aquí, haz que la suma sea en 100%. No consideres la declaración de ancho del colgroup como un resultado final que se aplica en todas las circunstancias. El diseño automático funciona junto con el tamaño mínimo del contenido y los cálculos de la tabla. Por favor, consulte la descripción de colgroup en MDN.

Compara la distribución automática y fija

El diseño de tabla fijo requiere un ancho de tabla especificado; width: auto no produce el cálculo fijo deseado. Aquí ambas tablas usan width: 100% y el mismo grupo de columnas, diferenciándose solo en table-layout. Si una celda recorta el texto, revise sus condiciones de ajuste y elipsis por separado. Consulte MDN: diseño de tabla, CSS Desbordamiento, Ajuste de Texto Largo y Elipsis.

Los datos a continuación contienen códigos de reserva largos que queremos mostrar sin saltos de línea. El ejemplo completo aplica nowrap·hidden·ellipsis a esta celda de manera idéntica en ambas tablas. El diseño automático puede expandirse para reflejar el espacio de valores largos, y, con la distribución fija, el texto puede truncarse dentro de la columna asignada. El texto original se proporciona en su totalidad en un párrafo separado, para que también pueda verificar el código truncado.

Desplaza la región de la tabla en pantallas estrechas

.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 32rem; }

Si el tamaño de fuente raíz es de 16px, entonces 32rem son 512px. Si el ancho disponible en la pantalla es menor que eso, la tabla mantendrá su ancho mínimo y solo el contenedor de la tabla permitirá desplazamiento horizontal. Esto debe distinguirse de deslizar toda la página horizontalmente. Los 32rem en el ejercicio son solo para fines de comparación para estas dos columnas y no están destinados como un ancho mínimo para todas las tablas. Verifica si la pantalla pequeña se corta y si puede manipularse de acuerdo con los ítems Comprobar CSS responsivo con ancho, zoom y pruebas de teclado.

Si tu tabla es pequeña y aún legible, puedes reducir o eliminar el ancho mínimo. Por el contrario, comprimir varias columnas y valores largos puede dificultar su lectura. Determina a partir de los datos reales si las columnas semánticas pueden acortarse, resolverse con saltos de línea o si se requiere movimiento horizontal. En dispositivos móviles, instrucciones como “Puedes moverte horizontalmente” pueden ser útiles.

El contenedor desplazable tiene tabindex="0", role="region", un nombre accesible descriptivo y un contorno visible de enfoque. Tabula hacia él y usa las flechas para llegar a la última columna. Una tabla que no necesita desplazamiento no requiere automáticamente un tabulador adicional. Consulta MDN: overflow.

Ejecuta la comparación completa de la tabla

Guarda y abre el código a continuación como UTF-8 en tables.html. Utiliza las mismas tres filas y la misma proporción de columnas 30:70, para que puedas comparar las diferencias entre los diseños. El código de reserva es un dato ficticio para practicar el diseño.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Table sizes and long content</title>
  <style>
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }
    .table-scroll:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    table { width: 100%; min-width: 32rem; border-collapse: collapse; }
    th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
    .auto { table-layout: auto; }
    .fixed { table-layout: fixed; }
    .token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .original { max-width: 640px; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Automatic and fixed table layout</h1>
  <h2>table-layout: auto</h2>
  <div class="table-scroll" role="region" aria-label="Auto Batch Comparison Table" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <h2>table-layout: fixed</h2>
  <div class="table-scroll" role="region" aria-label="Fixed batch comparison table" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <p class="original">Full reservation code: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>

1. Reduce el tamaño de la ventana y comprueba el ancho de ambas tablas. Las tablas fijas tienen al menos 512px con una raíz de 16px, y las tablas automáticas pueden ser más anchas para reflejar un código más largo. Ambas tablas deben desplazarse horizontalmente en el área en la que se ajustan, no a través de la página.
2. Muévete al área de la tabla fija con Tab y comprueba la última columna con la tecla de flecha derecha. En pantallas pequeñas, también comprueba si puedes moverte horizontalmente con el dedo. Cuando termines de desplazarte, regresa al extremo izquierdo.
3. Cambia table-layout en .fixed a auto. Después de comprobar cómo cambian el ancho de la columna y de la tabla con los mismos datos, restaura fixed.
4. Cambia white-space de .token a normal y añade overflow-wrap: anywhere. Comprueba si el código largo se ajusta para aumentar la altura de la celda, después vuelve a la declaración original.
5. Cambia la proporción de columnas a 40:60. Compara el espacio en la columna de entradas cortas con los saltos de línea en la columna de descripción. Restaura la proporción original 30:70 y compruébala en una pantalla ancha y con texto ampliado.

Si las proporciones no se ven como se esperaba, comprueba el diseño de la tabla y el ancho de tabla especificado, el ancho mínimo y las condiciones de ajuste para cadenas largas. Si el movimiento horizontal no funciona, asegúrate de especificar overflow-x en el elemento envuelto y no en la propia tabla. Si eliges abreviar palabras, deberías poder leer el texto original importante en otro lugar.