¿Cómo mostrar tablas en dispositivos móviles usando Bootstrap?

90

Mis tablas se muestran bien en el escritorio, pero una vez que trato de ver la versión móvil, mi tabla termina siendo demasiado ancha para la pantalla del dispositivo móvil. Estoy usando un diseño receptivo.

¿Cómo puedo establecer el ancho de la mesa para la vista móvil? ¿Qué otras alternativas existen para presentar datos tabulares en vistas móviles usando Bootstrap?

twitter-bootstrap twitter-bootstrap-3 mira
fuente
2
Noté que Bootstrap 3.0 será "primero móvil". ¿Alguien cree que resolverá este "problema" de las mesas móviles?
Las tablas todavía parecen ser las mismas en Bootstrap 3. :(
Giles Roberts
1
@GilesRoberts Si por "lo mismo en Bootstrap 3" quieres decir "ahora responde en Bootstrap 3", entonces sí, son lo mismo .
ta.speot.is
@ ta.speot.is Son mejores ahora que en los candidatos de lanzamiento. Todos los ejemplos allí, aunque solo tienen 4 columnas. Todavía no funciona muy bien para mesas anchas. Terminé usando una solución con una primera columna fija y todo el resto desplazándose.
Giles Roberts
@ ta.speot.is Acabo de ver su respuesta a continuación. Se perdió que Bootstrap 3 tiene una clase que responde a tablas. Funciona bien si no necesita que ciertas columnas estén siempre visibles.
Giles Roberts

Respuestas:

122

Bootstrap 3 presenta tablas receptivas :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4 es similar, pero con más control a través de algunas clases nuevas :

... sensible en todas las ventanas gráficas ... con .table-responsive. O elija un punto de interrupción máximo con el que tener una tabla receptiva utilizando .table-responsive{-sm|-md|-lg|-xl}.

Gracias a Jason Bradley por dar un ejemplo:

Tablas receptivas

ta.speot.is
fuente
6
Gracias. Como el 99,9% de las personas, no me molesté en leer la documentación de la actualización. Supongo que debería haberlo hecho.
David Bélanger
1
De hecho, es ! Además, está haciendo lo que quería hacer en primer lugar, ¡así que para mí es un 2 en 1!
David Bélanger
¿Qué hace exactamente la table-responsiveclase? Bootstrap docs dice "para hacer que se desplacen horizontalmente", pero no noto una diferencia relacionada con el desplazamiento. La única diferencia que noto es que la tabla tiene bordes en el exterior cuando está debajo de un cierto tamaño de pantalla ( como se ve en el ejemplo ).
Dennis
5
@ ta.speot.is Me di cuenta de que leí mal la documentación y estaba usando la clase incorrectamente. Estaba agregando .table-responsivea la tabla en sí (por ejemplo <table class="table table-responsive">), en lugar de envolver la tabla .table-responsive, lo que incluso señaló en su ejemplo.
Dennis
1
@PirateApp Use hidden-*en las direcciones de correo electrónico tdde las columnas que desea ocultar getbootstrap.com/docs/3.3/css/#responsive-utilities
ta.speot.is
68

También puede considerar probar uno de estos enfoques, ya que las tablas más grandes no son exactamente amigables en dispositivos móviles, incluso si funciona:

http://elvery.net/demo/responsive-tables/

Soy partidario de 'No More Tables', pero eso obviamente depende de su aplicación.

Acordes
fuente
3
¡Enlace fantástico y tres soluciones realmente geniales! Tuve que buscar en Google mi camino de regreso a esta pregunta solo para votar tu respuesta. ¡Gracias!
Simon
2
Una respuesta que consiste únicamente en un enlace es una mala etiqueta de Stack Overflow. La página puede desaparecer, el contenido de la página puede cambiar, la respuesta no es visible de inmediato, la respuesta no se puede mejorar, etc. Por cierto, el enlace ya no apunta al contenido correcto.
Dennis
De acuerdo, pero por ahora: web.archive.org/web/20130725223053/http://elvery.net/demo/…
Acordes
1
@Dennis tiene razón. Elabore su respuesta para resumir lo que hay en el enlace y conserve el enlace también para demostraciones y más detalles. No obstante, obtienes mi voto a favor, ya que el enlace es muy interesante. Salud.
Mario Awad