Avisos
Vaciar todo
Actualmente desarrollo webs adaptativas o responsive design, pero siempre he tenido problemas con hacer que las tablas que tengo que mostrar en los artículos sean responsive, es decir, se adapten al ancho de pantalla de los distintos dispositivos.
Hasta ahora, he tenido la suerte de que las tablas contenían datos fijos, que no cambiaban en en tiempo, y entonces podía transformarlas en imágenes y lograr que se comportaran de forma adaptativa sin problemas.
Pero ahora estoy con una web donde las tablas son vivas y sus datos varían cada semana, con lo que no puedo transformarlas en imágenes, así que necesito un componente o un plugin para que las tablas que introduzco en los artículos se comporten de manera responsive y se adapten al tamaño del dispositivo con el que se visiona la página web.
Que plugin o componente me recomendáis?
Gracias y un saludo!
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 06/09/2013 6:57 am
Hola Juan,
Puedes probar lo que explican en http://zurb.com/playground/responsive-tables?utm_source=html5weekly
Saludos
Respondido : 06/09/2013 8:43 am
Buenos dias.
He leido atentamente el artículo de referencia que me indicas, pero no me aclaro muy bien que tengo que hacer.
He entendido que aquí puedo descargarme dos archivos: responsive-tables.css y responsive-tables.js, pero no se que tengo que hacer con ellos... he de copiarlos en un sitio determinado de mi web? he de copiar el codigo a la hora de definir una tabla en un articulo?
La verdad es que parece que es la solución que estaba buscando, pero no se como aplicarla.
Me podéis echar una mano? Gracias!
Respondido : 06/09/2013 12:46 pm
Hola,
No te recomiendo aplicar cambios en los CSS agregando unos nuevos porque lo más probable es que te afecte al diseño de la web.
En todo caso tienes que tener en cuenta que una tabla html (creada con la etiqueta table) nunca puede presentar un comportamiento responsive.
Si lo único que quieres es que la tabla se adapte al ancho disponible bastará con que a la etiqueta table le añades la propiedad width="100%" teniendo en cuenta que a las columnas que forman la tabla no hay que darles un ancho fijo, como mucho en porcentaje (igual que la tabla).
El problema de esto es que si se comprime demasiado la página la tabla también lo hará, lo que puede que los contenidos se vean demasiado bien.
Normalmente en el diseño responsive cuando no se dispone de suficiente espacio se mueven algunas columnas para que se muestren debajo de las anteriores.
En la demo de la plantilla que estás usando se ve esto:
Revisa la parte de "Text columns" de la página anterior.
Respondido : 06/09/2013 1:44 pm
