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:
<table class="table table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Código</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>BARRITAS FRESA</td>
<td>1</td>
<td>50.0</td>
<td>1.0</td>
<td>50.0</td>
</tr>
<tr>
<td>BARRITAS MORAS</td>
<td>2</td>
<td>30.0</td>
<td>1.0</td>
<td>30.0</td>
</tr>
</tbody>
</table>
Por el momento no es responsiva, sin embargo, si la coloco dentro de un div con la clase table-responsive lo será:
<div clas="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Código</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>BARRITAS FRESA</td>
<td>1</td>
<td>50.0</td>
<td>1.0</td>
<td>50.0</td>
</tr>
<tr>
<td>BARRITAS MORAS</td>
<td>2</td>
<td>30.0</td>
<td>1.0</td>
<td>30.0</td>
</tr>
</tbody>
</table>
</div>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:
<!doctype html>
<html lang="es">
<!--
Ejemplo de una tabla responsiva en Bootstrap 4
Visita: parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Plantilla básica para Bootstrap">
<meta name="author" content="Parzibyte">
<title>Tabla responsiva BS4</title>
<!-- Cargar el CSS de Boostrap-->
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12">
<h1>Tabla responsiva</h1>
<a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Código</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>BARRITAS FRESA</td>
<td>1</td>
<td>50.0</td>
<td>1.0</td>
<td>50.0</td>
</tr>
<tr>
<td>BARRITAS MORAS</td>
<td>2</td>
<td>30.0</td>
<td>1.0</td>
<td>30.0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</body>
</html>Cuando se carga en una pantalla grande, se ve así:
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.
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.
