Tabla responsiva en Bootstrap – Ejemplo

Tabla responsiva en Bootstrap

En este post te mostraré cómo hacer que una tabla o elemento table de HTML sea responsiva en Bootstrap 4.

Una tabla responsiva en Bootstrap 4 es una tabla que se adapta a cualquier tamaño de pantalla, aunque específicamente hablando de tablas, las de Bootstrap se deben encerrar en un div que hace que al tabla sea “scrollable”, pero la tabla mantiene su tamaño.

Con los ejemplos verás a lo que me refiero.

El div con la clase table-responsive

Vamos rápido. Para crear una tabla responsiva en Bootstrap 4 debes encerrar el elemento table dentro de un div con la clase table-responsive.

Por ejemplo, tengo la siguiente tabla normal:

Por el momento no es responsiva, sin embargo, si la coloco dentro de un div con la clase table-responsive lo será:

Ejemplo de tabla responsiva en Bootstrap 4

Voy a mostrarte un ejemplo que puedes probar tú mismo. Me basaré en una plantilla de Bootstrap 4 que publiqué hace tiempo, agregaré la misma tabla:

Cuando se carga en una pantalla grande, se ve así:

Tabla responsiva en Bootstrap 4
La tabla se muestra completa en un dispositivo con pantalla grande

Pero si la página web se ve en una pantalla distinta, por ejemplo, la de un iPhone 5, la misma se muestra dentro de un div con scroll:

De esta manera cualquier dispositivo será capaz de mostrar la tabla, y si la pantalla no basta, la tabla estará dentro de un div.

Si quieres probar el ejemplo haz click aquí. Puedes probarlo en una PC o en cualquier dispositivo para que veas cómo es responsivo.

Más clases para la tabla responsiva

Además de la clase table-responsive existen las clases para los famosos breakpoints de Bootstrap 4, que no son otra cosa más que los tamaños de pantalla:

  • table-responsive-sm
  • table-responsive-md
  • table-responsive-lg
  • table-responsive-xl

Cuando un div tenga esa clase, la tabla solo se mostrará responsiva si está dentro de ese tamaño de pantalla, si es una pantalla más grande que la definida ahí, no se mostrará el scroll.

Por ejemplo, si tenemos un div con la clase table-responsive-md la tabla se mostrará responsiva en el tamaño sm y md, pero no se mostrará responsiva en un lg o xl.

Te invito a leer más sobre Bootstrap 4 o HTML en mi blog.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario