[AYUDA] Ayuda con una tabla (puede ser bootstrap)

Iniciado por gramsch, 17 Abril 2016, 20:53 PM

0 Miembros y 1 Visitante están viendo este tema.

gramsch

Hola! comunidad que me ha ayudado mucho jaja ojala me puedan ayudar

tengo una tabla en una pagina web que estoy diseñando, pero necesito que la tabla ajuste su tamaño dependiendo del tamaño de la pantalla, sin achicar las imagenes que estan dentro de cada cuadro.

Existe alguna forma de hacer que la tabla ajuste los elementos de la fila cuando cambie el tamaño de la ventana?
Por ejemplo si la tabla tiene 7 elementos por fila en una pantalla grande, que cuando se achique la ventana solo hayan 5 elementos por fila, para que se ajuste al tamaño de pantalla.
No se si hay alguna opcion en bootstrap para hacer esto o algun script o algo.. Por su ayuda muchas gracias! ;D ;D ;D

karmany

El tema de las tablas responsive no es sencillo. Existen muchos opciones para adaptarlas en un smartphone (por ej) y consigues que se vean bastante bien. Un ejemplo que puedes analizar es este usando media queries con CSS:
https://css-tricks.com/examples/ResponsiveTables/responsive.php

Y su correspondiente artículo aquí:
https://css-tricks.com/responsive-data-tables/
Aunque en el mismo artículo dice que no es perfecto.

Yo en muchos casos, prefiero bloquear el ancho de la tabla en un <div> que ocupe el ancho del smartphone y crear una barra horizontal para que desde el móvil se pueda ver el restante.

Finalmente, si usas Bootstrap tienes documentación aquí:
http://getbootstrap.com/css/#tables
Y para la futura versión 4 también tienes esta documentación:
http://v4-alpha.getbootstrap.com/content/tables/

Son_of_Bush

"Yo en muchos casos, prefiero bloquear el ancho de la tabla en un <div> que ocupe el ancho del smartphone y crear una barra horizontal para que desde el móvil se pueda ver el restante."

Coincido con karmany. Pienso que es mejor esta tecnica.

gramsch

Cita de: karmany en 18 Abril 2016, 21:33 PM
Yo en muchos casos, prefiero bloquear el ancho de la tabla en un <div> que ocupe el ancho del smartphone y crear una barra horizontal para que desde el móvil se pueda ver el restante.

Finalmente, si usas Bootstrap tienes documentación aquí:
http://getbootstrap.com/css/#tables
Y para la futura versión 4 también tienes esta documentación:
http://v4-alpha.getbootstrap.com/content/tables/

Y como harias eso para agregar la barra en los dispositivos moviles?