Tablas responsivas mal diseñadas

La primera vez que escribí un blog sobre tablas de datos responsivas fue en 2011. Cuando el diseño web responsivo se estaba convirtiendo en una realidad, había pequeños obstáculos, como las tablas de datos, que debían superarse. La naturaleza de tablelos elementos es que tienen un ancho mínimo dependiendo del contenido que contienen y que fácilmente puede superar el ancho de un dispositivo de pantalla pequeña.

Esta imagen que hice entonces todavía cubre bastante bien el problema:

Excepto… tal vez no apestan igualmente . Si esa imagen de la izquierda fuera desplazable, entonces tal vez eso en realidad… no sea tan malo. De hecho, eso es lo que he hecho recientemente aquí en CSS-Tricks. Creo que es la forma más segura de manejar tablas responsivas cuando no tienes idea del contenido que contiene la tabla. Ese es el caso aquí, donde necesito configurar estilos de tabla base que se apliquen a cualquier publicación de blog que pueda contener una tabla.

El quid de la idea de una tabla desplazable es envolverla en una divtabla que tiene overflow: auto;sobre ella. De esa manera, el tableinterior tiene libertad para exceder el ancho del padre, pero no “explotará el ancho” y en su lugar activará una barra de desplazamiento. Sin embargo, esto no es suficiente, así que aquí está Adrian Roselli con la verdadera primicia. El envoltorio divdebe poder enfocarse y etiquetarse, por lo tanto:

div role="region" aria-labelledby="Caption01" tabindex="0"  table    captionAppropriate caption/caption    !-- ...  --  /table/div

Luego aplique los estilos de desplazamiento y enfoque, siempre que haya hecho todo lo demás bien:

[role="region"][aria-labelledby][tabindex] {  overflow: auto;}[role="region"][aria-labelledby][tabindex]:focus {  outline: .1em solid rgba(0,0,0,.1);}

Si va a seguir diseñando tablas responsivas, existen todo tipo de opciones . Uno de los clásicos es el de display: blockmuchos elementos, lo que significa que todos los datos en una fila ( tr) terminan como un fragmento de contenido apilado que tiene menos posibilidades de romper el ancho del elemento principal. Puede obtener todas las etiquetas de datos correctamente con pseudoelementos. Pero esto sólo tiene sentido cuando las filas individuales de contenido tienen perfecto sentido por sí solas. Ese no es el caso con todas las mesas. El propósito de una tabla puede ser hacer referencias cruzadas de datos y, en ese caso, lo has arruinado con este enfoque. Nuevamente, existen buenos enfoques para las tablas responsivas cuando se conoce exactamente el contenido y el propósito de la tabla. Pero la mejor solución responsiva cuando no lo sabes es simplemente asegurarte de que se puedan deslizar.