Tablas responsive con Bootstrap

16/Ago/2015 Bootstrap , , 2 Comentarios

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


2 comentarios en “Tablas responsive con Bootstrap”

Víctor Cuervo

Rodrigo Pro

Todo un desafio hacer paginas responsive, puesto que al poner mas funcionalidades con jquery se tienen a generar incompatibilidades. Yo personalmente he generado un par de menu con accesorios, pero con jquery nuestro menu se ha llenado de incompatibilidades.

Víctor Cuervo

moises miguel

Muy interesante, gracias por compartir el video

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*