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:

<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í:

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.

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.

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/