Bootstrap: Tablas responsive con Bootstrap 3 y Stacktable
Área: Diseño Web & Ecom
Uno de los elementos de un diseño web que más quebraderos de cabeza puede dar al plantear una maquetación responsive son las tablas. En este artículo veremos cómo generar tablas responsive que “mutan” automáticamente en función de la resolución para ofrecer una perfecta usabilidad en todo momento.
antes de nada, advertir que n nos estamos refiriendo a la antigua forma de maquetar contenidos utilizando tablas (algo que creo que ya nadie concibe hoy en día), sino a las tablas cuando sí son necesarias, cuando queremos mostrar una información cuya disposición en filas y columas aporta información esencial.
Ejemplos habría miles, pongamos uno cualquiera:
En esta tabla, la disposición en filas y columnas tiene una utilidad clara: permite COMPARAR entre diferentes ofertas de posicionamiento en buscadores en un vistazo. El problema es que cuando vamos a una pantalla de smartphone, el espacio que tenemos es muchas veces insuficiente para mostrar todas las columnas al mismo tiempo, lo que en algunos casos (como en esta tabla del ejemplo) le resta toda la función de usabilidad con la que había sido concebida.
La solución estándar de Bootstrap
Bootstrap dispone de una clase llamada table-responsive que automáticamente aplica una solución de anchura variable a las tablas. Pero dicha solución no es otra que embeber la tabla en un divisor del 100% de anchura disponible, y hacer scroll horizontal dentro de él. El resultado es algo así:
A primera vista, la solución funciona, pero cuando la pones en práctica tiene dos inconvenientes muy importantes:
- A medida que desplazas el scroll para ver las últimas columnas, pierdes de vista la primera, que normalmente contiene información esencial sin la cual no puedes interpretar los datos de las demás
- En muchos móviles, las barras de scroll son apenas unas rayitas, que la mayoría de usuarios ni siquiera detectan, y sencillamente piensan que la tabla termina en la última columna que están visualizando.
Buscando una solución mejor para tus tablas responsive
En mis primeros meses de uso de Boostrap, mi solución predeterminada era replicar el concepto que quería mostrar con la tabla, y utilizar el modelo de grid de 12 columnas de Bootstrap para ir aplicando comportamientos diferentes a medida que cambiaba la resolución (es decir, adiós al <table> y <td> y todo a base de class=”col-xs-3 col-sm-5….” etc)
Eso, unido a estilos específicos para mostrar/ocultar datos en diferentes resoluciones, permite alcanzar lo que queremos. En el ejemplo siguiente queda claro:
- Información tabular a base de divisores en monitor grande:
- Esa misma información, en móvil (serían 3 bloques como éste, uno debajo de otro):
Lo que hemos hecho es replicar el texto de la primera columna junto a cada una de las demás. La visualización es más larga, pero los conceptos quedan claros para el lector, y la usabilidad se ha preservado. Es por tanto una solución válida, pero bastante trabajosa.
Y además, aunque ocultos para resoluciones altas, los textos de la primera columna ESTÁN dentro del código repetidos en la 2,3 y 4. No creo que a Google le haga mucha gracia, podría incluso considerarse keyword stuffing. Hay que seguir buscando una solución aún mejor.
La solución Stacktable para tablas responsive
Un buen día, buscando ideas para mejorar la forma de abordar de estos casos, di con una librería JS que aporta una solución fantástica (y sí, hace falta Javascript, no es CSS puro, pero no hay que codificar nada, es sólo inicializar y listo). Así que ningún miedo, aunque lo tuyo no sea el JavaScript, vas a poder utilizar Stacktable con toda seguridad.
La principal ventaja de este sistema de tablas responsives con Stactkable es que nos permita desarrollar los datos como una tabla clásica, a base de <table>, <tr>,<td> para conseguir una visualización perfecta en monitor grande, y este componente se encarga de generar una versión alternativa de la tabla para resoluciones pequeñas.
A continuación muestro un ejemplo que lo deja claro:
- Las primeras filas de la tabla, en resolución grande como ya la habíamos visto al principio del post:
- La solución Stacktable para las primeras de esas filas, tal y como se vería en resoluciones pequeñas:
Como se puede apreciar, lo que hace esta librería es “transmutar” las columnas en filas, de modo que la comparación sigue siendo 100% eficaz en cada apartado analizado. Y si podemos hacer todo ello en menos de 3 minutos de trabajo adicional respecto al que lleva crear la tabla original, estaríamos ante una solución muy potente y bien elegante.
Cómo se aplica Stacktable
Lo mejor de Stacktable es que es sencillísimo de aplicar.
- Descargas el componente stacktable.js de su fuente original: http://johnpolacek.github.io/stacktable.js/
- Enlazas la librería stacktable en tu plantilla HTML. Sería algo así:
<script type=”text/javascript” src=”js/stacktable.js”></script>
(Obviamente poniendo la ruta relativa a donde cada uno tenga el archivo de la librería.)
- Inicializas la función stacktable:
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#tabla1′).stacktable();
});
</script>
- Aplicas la clase stacktable a tu tabla y le asignas el id que has inicializado arriba:
<table id=”tabla1″ class=”table stacktable” border=”0″>
<tr>
<th>…</th>
<th>…</th>
<th>…</th>
</tr>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
</table>
Y voilá, ya lo tienes!. Lo que decía.. 3 minutos de trabajo, y adiós al gran problema de las tablas. Increiblemente útil e increíblemente sencillo.
Muchas gracias por esta aportación. Yo hacía lo mismo que tú, volverme loco con las clases de bootstrap o simplemente poner la tabla tan horrible que hace bootstrap con la clase responsive table. Ahora podré hacer que mis tablas se vean mejor!
Hola amigo,
Estoy haciendo los mismos pasos pero no se me presenta como «Card table» cuando see achica el navegador al tamaño de un celular o móvil.
Gracias
Saludos
Revisa que tengas bien enlazada la ruta del archivo stacktable.js, que hayas inicializado la función, y que haya asignado la clase stacktable a la tabla… si esas 3 cosas están bien, «no puede fallar»
Ok. Gracias!!
Si funciona!, la armé poco a poco en un html separado de mi proyecto(asp.net)…mañana lo haré en mi proyecto.
(No se aún como haré, ya que mi grilla real dispone de 10 columnas, y con este .js se me verán 10 filas(10 datos) por cada fila cuando está en modo normal la tabla..por lo que estaba pensando poner 2 datos en cada columna 🙂 …a ver si lo ve bien el usuario final)
Gracias nuevamente!!
En esos casos, suele ser útil hacer que la tabla se parta en varias, una por fila, introduciendo un margin-bottom en cada fila para resoluciones pequeñas, así visualmente no se convierte en un único listado demasiado largo, sino en varias tarjetas separadas. Me refiero a algo vía CSS así:
@media (max-width:768px) {#tu_tabla tr {margin-bottom:10px}}
Gracias Cubic,
(eso lo veré después)
Ya que los estoy tratando de ponerlo en un formulario ASP.NET(que depende de una master) y no me está funcionando….estoy haciendo lo mismo que en mi caso exitoso de anoche y no me funciona.
Muchas gracias!
En mi proyecto ASP.NET solo funciona en un formulario que no herede de una Pagina maestra, de lo contrario me sale el mensaje «TypeError: $(…).cardtable is not a function[Saber más]» en el Depurador del Mozilla.
….alguna idea?
Gracias,
El componente en sí no es lenguaje-dependiente, el JS debería poder funcionar. Pero no trabajamos con .NET así que por ahí no puedo ayudarte más, lo siento 🙁
Como te comenté, solucioné el problema que me daba cuando usaba una master(asp.net).
Ahora, quisiera aplicar la técnica que me indicaste para cuando la cantidad de columnas es «abundante»…mañana lo intentaré.
A ver si te entendí, por cada fila de mi grilla, realmente hacer algo como(es como hacer tablas anidadas no?):
( aqui pongo el dato, 1ra columna )
</td
( aqui pongo el dato, n columna )
</td
( aqui pongo el dato, 1ra columna )
</td
( aqui pongo el dato, n columna )
</td
Gracias!!
Hmmm no entiendo bien lo que quieres decir, pero no hablé de anidar tablas en ningún momento, me refería a establecer por estilos «algo» que parta la tabla después de cada fila.
Hola manuel me gustaria saber como aplicaste la solucion a tu proyecto en asp .net … gracias por la respuesta
PROBANDO RESPUESTA
Hola Abram,
He intentado poner el script debajo de tu respuesta pero esta página no me lo permite ya que cuando la trato de ver no veo mi respuesta….Quizás sea que porque es código html/js.
Dame tu mail para enviarte el código.
Pero basicamente en mi caso lo solucioné poniendo el código en LA PÁGINA MAESTRA (y no en el formulario hijo)
Saludos y dime si puedes solucionar lo del Postbak YA QUE LA PRIMERA VEZ que carga la pagina se ve bonito, pero si hago un postback, se me deforma, es decir en el modo MÓVIL o CELULAR no se ponen las columnas como filas.
EXCELENTE Cubic Factory !!!!!!!!
Es la solución más practica, sencilla y elegante que visto hasta ahora.
Muchas gracias por el valioso aporte.
Saludos y muchos éxitos con tu website.
Amigos mios,
He observado que no me funciona muy bien cuando hago un POSTBACK.
Funciona perfectamente cuando la pagina carga por PRIMERA VEZ. PERO cuando hago un POSTBACK se me DEFORMA.
¿ Hay alguna forma de evitar eso? ¿ alguna sugerencia para superar este impase ?
Agradecería que me ayuden en eso por favor.
Saludos amigos.
Hola Manuel,
Ese problema es ajeno al stacktable en sí. Si no te funciona igual al volver a la página, es que en algún sitio estás perdiendo el enlace o la inicialización de la librería JS que lo hace funcionar… no tiene más misterio, es decir, si no te actúa es que no está lanzando el javascript correspondiente. Revisa a ver si al volver a la página estás enlazando correctamente las librerías e inicializando stacktable.
Hasta el momento he logrado observar(para los que usan ASP.NET) que es el UpdatePanel el que está causando este problema…..cuando tenga tiempo, trataré de averiguar mas….pero si hay alguien por ahi que sepa como solucionarlo que nos avise por favor.
Saludos amigos.