Tablas responsive con Bootstrap

Una de las capacidades que tiene el framework Bootstrap es la gestión de los diseños responsive. Es decir, la capacidad de poder adaptar nuestra página web a cualquier dispositivo. En este artículo vamos a ver como podemos crear tablas responsive con Bootstrap.

Crear una tabla básica

Lo primero que haremos será crear nuestra tabla:

<table class="table">
  <tr>
    <th>País</th>
    <th>Capital</th>
    <th>Superficie</th>
    <th>Habitantes</th>
    <th>Descripción</th>
  </tr>
  <tr>
    <td>España</td>
    <td>Madrid</td>
    <td>504.645 km<sup>2</sup></td>
    <td>46,6 M</td>
    <td>España es un país situado en el suroeste de Europa.</td>
  </tr>
  <tr>
    <td>Francia</td>
    <td>París</td>
    <td>643.801 km<sup>2</sup></td>
    <td>67 M</td>
    <td>Francia es un país de Europa Occidental.</td>
  </tr>
</table>

Para poder crear la tabla deberemos de tener conocimiento del lenguaje HTML y deberemos de manejar los elementos table, tr y td.

De igual manera deberemos de saber que las tablas en Bootstrap se manejan con la clase table. Dicha clase la asignaremos al atributo class.

Hacer la tabla responsive

Ahora pasaremos a manejar el soporte para el responsive. Para tener tablas responsive con Bootstrap debemos de recubrir la tabla con una capa div. A dicha capa le asignaremos la clase table-responsive.

<div class="table-responsive">
  <table class="table">
    <tr>
      <th>País</th>
      <th>Capital</th>
      <th>Superficie</th>
      <th>Habitantes</th>
      <th>Descripción</th>
    </tr>
    <tr>
      <td>España</td>
      <td>Madrid</td>
      <td>504.645 km<sup>2</sup></td>
      <td>46,6 M</td>
      <td>España es un país situado en el suroeste de Europa.</td>
    </tr>
    <tr>
      <td>Francia</td>
      <td>París</td>
      <td>643.801 km<sup>2</sup></td>
      <td>67 M</td>
      <td>Francia es un país de Europa Occidental.</td>
    </tr>
  </table>
</div>

Comportamiento en dispositivos móviles

ℹ️ Las tablas responsive con Bootstrap ejecutan su cambio de comportamiento con dispositivos móviles. Es decir, con dispositivos cuyo área de visualización sea menor a 768px.

Cuando veamos tablas responsive con Bootstrap desde nuestros dispositivos móviles veremos que, al no poder mostrar todo el contenido de la tabla, lo que hará Bootstrap es generar una tabla que ocupe todo el ancho y una barra de scroll horizontal que nos irá mostrando el contenido de toda la tabla.

Para el resto de dispositivos la visualización será la misma.