Fingir ancho mínimo en una columna de tabla

El buen viejo <table> La etiqueta es el HTML más semántico para mostrar datos tabulares. Pero me resulta muy difícil controlar cómo se presenta la tabla, en particular los anchos de columna en un entorno dinámico en el que es posible que no sepa cuánto contenido va a cada celda de la tabla. En algunos casos, una columna es súper ancha mientras que otras están arrugadas. Otras veces, obtenemos anchos iguales, pero a expensas de una columna que contiene más contenido y necesita más espacio.

Pero encontré una solución alternativa con trucos de CSS que ayuda a hacer las cosas un poco más fáciles. Eso es lo que quiero mostrarles en este post.

El problema

Primero necesitamos entender cómo el navegador maneja el diseño. tenemos el table-layout propiedad en CSS para definir cómo una tabla debe distribuir el ancho de cada columna de la tabla. Toma uno de dos valores:

• auto (Por defecto)
• fixed

Comencemos con una tabla sin definir anchos en sus columnas. En otras palabras, dejaremos que el navegador decida cuánto ancho dar a cada columna aplicando table-layout: auto en él en CSS. Como notará, el navegador hace lo mejor que puede con el algoritmo que tiene para dividir el ancho total disponible entre cada columna.

Si intercambiamos un diseño de mesa automático con table-layout: fixed, entonces el navegador simplemente dividirá el espacio total disponible por el número total de columnas, luego aplicará ese valor como el ancho de cada columna:

Pero, ¿y si queremos controlar los anchos de nuestras columnas? tenemos el <colgroup> elemento para ayudar! consiste en individuos <col> elementos que podemos usar para especificar el ancho exacto que necesitamos para cada columna. Veamos cómo funciona eso con table-layout: auto:

He alineado los estilos por el bien de la ilustración.

El navegador no respeta los anchos en línea, ya que exceden la cantidad de espacio de tabla disponible cuando se suman. Como resultado, la tabla roba espacio a las columnas para que todas las columnas estén visibles. Este es un comportamiento predeterminado perfectamente correcto.

¿Cómo <colgroup> trabajar con table-layout: fixed. Vamos a averiguar:

Esto no se ve nada bien. Necesitamos que la columna con un montón de contenido se flexione un poco mientras se mantiene un ancho fijo para el resto de las columnas. un fijo table-layout El valor respeta el ancho, pero tanto que consume el espacio de la columna que necesita más espacio... lo cual es imposible para nosotros.

Esto podría resolverse fácilmente si pudiéramos establecer un min-width en la columna en lugar de un width. De esa forma, la columna diría: "Puedo darles a todos algo de mi ancho hasta que alcancemos este valor mínimo". Luego, la tabla simplemente desbordaría su contenedor y le daría al usuario un desplazamiento horizontal para mostrar el resto de la tabla. Pero desafortunadamente, min-width en las columnas de la tabla no son respetadas por el <col> .

La solución

La solución es fingir un min-width y tenemos que ser un poco creativos para hacerlo.

Podemos agregar un vacío <col> como la segunda columna de nuestro <colgroup> en el HTML y aplicar un colspan atributo en la primera columna para que la primera columna ocupe el espacio para ambas columnas:

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

Tenga en cuenta que he agregado clases en lugar de los estilos en línea del ejemplo anterior. Todavía se aplica la misma idea: estamos aplicando anchos a cada columna.

El truco es que la relación entre la primera <col> y el segundo vacío <col>. Si aplicamos un ancho a la primera <col> (su 200px en el fragmento anterior), la segunda columna se consumirá cuando el diseño de la tabla fija divida el espacio disponible para distribuirlo entre las columnas. Pero el ancho de la primera columna (200px) se respeta y permanece en su lugar.

Voilà! tenemos un falso min-width colocado en una celda de la mesa. La primera celda se flexiona a medida que cambia el espacio disponible y la tabla se desborda para el desplazamiento horizontal tal como esperábamos.

(Agrego un poco posicionamiento pegajoso a la primera columna allí.)

Accesibilidad

No olvidemos totalmente la accesibilidad aquí. Revisé la tabla a través de NVDA en Windows y VoiceOver en macOS y descubrí que se anuncian las cinco columnas, incluso si solo usamos cuatro de ellas. Y cuando la primera columna está enfocada, anuncia, "Columna uno a dos". No es perfectamente elegante, pero tampoco hará que alguien se pierda. Me imagino que podríamos lanzar un aria-hidden atributo en la columna no utilizada, pero también sepa que ARIA no es un sustituto del HTML deficiente.

---

Lo admito, esto se siente un poco, um, raro. ¡Pero funciona! Déjame saber si tienes un enfoque diferente en los comentarios... o conoce cualquier confusión que este "truco" pueda traer a nuestros usuarios.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/faking-min-width-on-a-table-column/