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.
| País | Capital | Superficie | Habitantes | Descripción |
|---|---|---|---|---|
| España | Madrid | 504.645 km2 | 46,6 M |
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.
País
Capital
Superficie
Habitantes
Descripción
España
Madrid
504.645 km2
46,6 M
...
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.
