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.
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.
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:
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.