Crear tablas responsive con CSS

Tiempo estimado de lectura: 4 minutos

 

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:

<div style="width: 665px;">
<main class="contenedor">
<div>Fila 1 Columna 1</div>
<div>Fila 1 Columna 2</div>
<div>Fila 1 Columna 3</div>
<div>Fila 2 Columna 1</div>
<div>Fila 2 Columna 2</div>
<div>Fila 2 Columna 3</div>
<div>Fila 3 Columna 1</div>
<div>Fila 3 Columna 2</div>
<div>Fila 3 Columna 3</div>
</main>
</div>

Con este código creamos un contenedor general de 665px de ancho, y dentro creamos 9 contenedores más con los textos Fila 1 Columna 1, Fila 1 Columna 2, Fila 1 Columna 3

A continuación creamos una clase llamada contenedor, con el siguiente código CSS:

.contenedor {
display: grid;
padding: 1rem;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: repeat(3, 150px);
}
.contenedor div {
background-color: #fff;
color: #000;
padding: 1rem;
border: 1px #000 solid;
}

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.

El resultado es el siguiente:
Cómo crear tablas responsive con CSS
Cómo crear tablas responsive con CSS
Y a medida que la ventana se va haciendo más pequeña:
tablas responsive con CSS
Tablas responsive con CSS


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *