El framework CSS de Bulma provee clases para agregar estilos a las tablas, así como contenedores de las mismas.

Hoy vamos a ver cómo hacer una tabla responsiva utilizando la clase table-responsive, clase que funciona pero para que lo haga debemos hacer algunos cambios con los div padres.

¿Qué es una tabla responsiva?

En este caso específico, una tabla responsiva es aquella que, al ser más ancha que la pantalla, muestra un scroll.

Hay una variación en donde las columnas se convierten en filas, pero no veremos eso; por ahora veremos cómo hacerla scrollable.

Tabla responsiva en Bulma

Vamos al grano. Hay que encerrar la tabla dentro de un div con la clase table-container, pero es muy importante que este div no esté dentro de otro div que tenga la clase column ni la clase columns.

Es decir, lo siguiente no hará la tabla responsiva:

Pero lo siguiente sí:

En mi caso causó una confusión debido a que utilizo ambas clases para la cuadrícula y todo eso, pero no es necesario encerrarla, pues ocupará el 100 % del ancho de la pantalla.

Para finalizar el post quiero mostrar la tabla responsiva de un sistema textil en el que ando trabajando:

Tabla responsiva en Bulma CSS

 


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Relacionado:  Dibujar líneas y separadores en HTML usando CSS

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 608 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

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

A %d blogueros les gusta esto: