Cómo crear tablas responsive con CSS
Hoy aprenderemos a crear tablas responsive con CSS. La verdad es que como la semana pasada, en la que hemos visto cómo hacer tablas adaptables, lo que vamos a hacer es engañar al usuario creando <div>.
Lo que perseguimos
Lo que vamos a hacer es lo siguiente: al igual que la semana pasada, crearemos una estructura de contenedores (<div>) y los posicionaremos uno al lado del otro para simular las columnas de una tabla).
A continuación crearemos otra estructura horizontal que tenga el mismo número de contenedores, para dar la sensación de ser una tabla con dos filas.
La idea es que a medida que el tamaño de la ventana se haga más pequeño, los contenedores se vayan situando un debajo del otro para lograr el efecto responsive.
Código que vamos a utilizar para crear las tablas responsive con CSS
Vamos a utilizar un código CSS no demasiado complejo. De todas formas, te lo muestro y te lo explico.
El código HTML que vamos a utilizar es el siguiente:
Este código formatea al contenedor, hace que se muestre en forma de grid (rejilla), cada columna medirá 200px de largo, y cada vez que la rejilla mida otros 200px adicionales (mas la longitud del padding), se añadirá una columna más.
Para evitar esto, en la medida de lo posible, y que la tabla tenga 3 columnas en cada fila, el tamaño del contenedor en el código HTML es de 665px, que sería el resultante de 3 contenedores de 200px de longitud cada uno, más sus respectivos paddings.
En este ejemplo, la cuarta columna aparecería cuando el contenedor general mida más de 880px, es decir, 4 columnas de 200px cada una más las medidas de los paddings.
Deja que WordPress trabaje por ti, utiliza código.