Hacer que las tablas respondan con CSS mínimo

Aquí hay un fabuloso truco de CSS de Bradley Taunt en el que muestra cómo hacer que las tablas funcionen en dispositivos móviles con solo un poco de código adicional. Él diseña cada fila de la tabla en una tarjeta que se parece a esta:

(Asegúrese de tomar el lápiz y hacerlo un poco más pequeño para ver cómo funciona el diseño).

El ejemplo de marcado de Bradley se ve así: HTML limpio, accesible y normal:

table  thead    tr      thType of Food/th      thCalories/th      thTasty Factor/th    /tr  /thead  tbody    tr      tdspanType of Food/span Slice of Pizza/td      tdspanCalories/span 450/td      tdspanTasty Factor/span 95%/td    /tr  /tbody/table

¿Cómo hace que esa carta tenga efecto? Utiliza flexbox en pantallas más pequeñas y configura los spanelementos para que se revelen por sí mismos.

¡Sin embargo! No soy un gran admirador de esos tramos. Están ocultos en pantallas de mayor tamaño, pero el marcado sigue ahí, por lo que no me parece particularmente claro. Hace un tiempo estaba trabajando en un proyecto en el que nos topamos con el mismo problema. En su lugar, sugerimos usar atributos de datos en cada uno td, como este:

table  thead    tr      thType of Food/th      thCalories/th      thTasty Factor/th    /tr  /thead  tbody    tr      td data-title="Type of Food"Slice of Pizza/td      td data-title="Calories"450/td      td data-title="Tasty Factor"95%/td    /tr  /tbody/table

Luego podemos tomar ese atributo de datos en nuestros estilos y representarlo en la página en un pseudo elemento:

td:before {  content: attr(data-title);}

A partir de ahí, posicionamos absolutamente el pseudoelemento a un lado y solo lo mostramos en pantallas más pequeñas con una consulta de medios. No estoy seguro de las implicaciones de accesibilidad de esto, pero en mi opinión, parece un poco más fácil de leer y comprender.

De cualquier manera, creo que esta publicación es un gran recordatorio sobre todos los problemas complicados que surgen una vez que comienzas a usar tablas. Hay muchas maneras de manejar las cosas de manera receptiva y esas decisiones deben tomarse enteramente en el contexto del diseño.