Tablas responsive con Bootstrap

16/Ago/2015 Bootstrap , ,

Una de las capacidades que tiene el framework Bootsrap 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 Bootsrap.

Lo primero que haremos será crear nuestra tabla.

  1. <table class="table">
  2. <th>País</th>
  3. <th>Capital</th>
  4. <th>Superficie</th>
  5. <th>Habitantes</th>
  6. <th>Descripción</th>
  7. </tr>
  8. <td>España</td>
  9. <td>Madrid</td>
  10. <td>504.645 km<sup>2</sup></td>
  11. <td>46,6 M</td>
  12. </tr>
  13. ...
  14. </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 Bootsrap se manejan con la clase table. Dicha clase la asignaremos al atributo class.

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.

  1. <div class="table-responsive">
  2. <table class="table">
  3. <th>País</th>
  4. <th>Capital</th>
  5. <th>Superficie</th>
  6. <th>Habitantes</th>
  7. <th>Descripción</th>
  8. </tr>
  9. <td>España</td>
  10. <td>Madrid</td>
  11. <td>504.645 km<sup>2</sup></td>
  12. <td>46,6 M</td>
  13. </tr>
  14. ...
  15. </table>
  16. </div>

Las tablas responsive con Bootsrap 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 Bootsrap desde nuestros dispositivos móviles veremos que, al no poder mostrar todo el contenido de la tabla, lo que hará Bootsrap 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.

Vídeos sobre Bootstrap


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D