Tablas "responsive" con CSS

Las tablas son un patrón de diseño para mostrar grandes cantidades de datos en filas y columnas, lo que las convierte una forma muy visual y eficiente de mostrar datos.  Desde el principio,  la web admite la visualización de datos en formato tabular. Las tablas HTML presentan datos tabulares de una manera semántica y estructuralmente apropiada. Sin embargo, los estilos predeterminados en las tablas HTML no son idóneos para la visualización en dispositivos móviles. 

Como ejemplo os muestro esta tabla de columnas con los siguientes estilos:

En dispositivos móviles, dónde el ancho disponible es mucho menor, la visualización de los datos de la tabla implica la reducción del tamaño de la fuente. En los casos en que la tabla contenga una cantidad de columnas significativa  la lectura de los datos se hace considerablemente difícil. Evidentemente, podemos recurrir a realizar un"zoom" en la propia pantalla, pero ésta no debería ser la solución.

Solución 1: Aplicar Scroll Horizontal

Una de las opciones es aplicar un scroll horizontal que sea visible en aquellos casos en que el ancho disponible sea inferior al ancho total de la tabla :

Solución 2: Añadir estilos para convertir la tabla en responsive

Para conseguir estilos que presenten los campos de cada registro de la tabla en forma vertical y con el 100% del ancho disponible debemos añadir el siguiente atributo "data-cell"(el nombre puede ser similar) a todos los campos de cada fila de la tabla. Este atributo debe contener el nombre del campo a la que pertenece el dato. El siguiente código es un ejemplo para una de los registros de la tabla:

El pseudo-elemento de Css "before" nos permite acceder a los atributos de cada elemento de la tabla. Aprovechando pues, que hemos incluido el atributo "data-cell" con el nombre del campo en cada registro, podemos añadir estilos a los elementos de la tabla para su visualización en móviles:

Con esto el resultado de la visualización de la tabla  para móviles es el siguiente:

Maquetación de tablas de datos "responsive" únicamente con Css. Utilización del pseudo-elemento: "before"