Ancho de columna de tabla mínimo falso | trucos CSS

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

Pero encontré una solución de truco 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. table-layout propiedad en CSS para determinar cómo una tabla debe asignar el ancho para cada columna de la tabla. Toma uno de dos valores:

Comencemos con una tabla sin definir anchos para sus columnas, en otras palabras, dejaremos que el navegador decida qué ancho darle 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 el diseño automático de la tabla con table-layout: fixedluego, 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 el ancho de nuestras columnas? <colgroup> ¡elemento de ayuda!Consiste en un individuo <col> elementos que podemos usar para especificar el ancho exacto que necesitamos para cada columna. Veamos cómo funciona esto con table-layout: auto:

He insertado los estilos para ilustración.

El navegador no respeta los anchos incrustados porque exceden el tamaño del 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 doble un poco mientras se mantiene un ancho fijo para el resto de las columnas. Fijado 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 se puede resolver fácilmente si solo podemos establecer un min-width de la columna en lugar de un widthDe esa manera, la columna dirá: "Puedo darles a todos parte de mi ancho hasta que alcancemos este valor mínimo". Luego, la tabla simplemente desbordará su contenedor y le dará al usuario un desplazamiento horizontal para mostrar el resto de la tabla. Pero desafortunadamente , min-width de las columnas de la tabla no son respetadas por <col> elemento.

La solución

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

Podemos agregar un espacio en blanco <col> como una segunda columna para la nuestra <colgroup> en HTML y aplicar un colspan atributo en la primera columna para que la primera columna ocupe 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 agregué clases en lugar de los estilos en línea del ejemplo anterior.Aún se aplica la misma idea: aplicamos anchos a cada columna.

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

¡Aquí! tenemos una falsificación min-width La primera celda se dobla cuando cambia el espacio disponible y la tabla se desborda para el desplazamiento horizontal, tal como esperábamos.

(Agregué un posicionamiento fijo a la primera columna allí).

Accesibilidad

No olvidemos por completo la accesibilidad aquí. Ejecuté la tabla a través de NVDA en Windows y VoiceOver en macOS y descubrí que las cinco columnas están declaradas, incluso si solo usamos cuatro de ellas. Y cuando la primera columna está enfocada, anuncia "Columna uno a dos". No es exactamente elegante, pero tampoco hará que nadie se pierda. Supongo que podemos lanzar aria-hidden atributo en la columna no utilizada, pero también sepa que ARIA no es un reemplazo para HTML incorrecto.

---

Lo admito, esto se siente un poco, um, raro. ¡Pero realmente 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.