Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: gramsch en 17 Abril 2016, 20:53 pm



Título: [AYUDA] Ayuda con una tabla (puede ser bootstrap)
Publicado por: gramsch en 17 Abril 2016, 20:53 pm
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


Título: Re: [AYUDA] Ayuda con una tabla (puede ser bootstrap)
Publicado por: karmany en 18 Abril 2016, 21:33 pm
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 (https://css-tricks.com/examples/ResponsiveTables/responsive.php)

Y su correspondiente artículo aquí:
https://css-tricks.com/responsive-data-tables/ (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 (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/ (http://v4-alpha.getbootstrap.com/content/tables/)


Título: Re: [AYUDA] Ayuda con una tabla (puede ser bootstrap)
Publicado por: Son_of_Bush en 19 Abril 2016, 00:49 am
"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.


Título: Re: [AYUDA] Ayuda con una tabla (puede ser bootstrap)
Publicado por: gramsch en 22 Abril 2016, 21:51 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 (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/ (http://v4-alpha.getbootstrap.com/content/tables/)

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