Comment afficher des tableaux sur mobile en utilisant Bootstrap?

90

Mes tableaux s'affichent bien sur le bureau, mais une fois que j'essaye de voir la version mobile, ma table finit par être trop large pour l'écran de l'appareil mobile. J'utilise une mise en page réactive.

Comment puis-je définir les largeurs de tableau pour la vue mobile? Quelles autres alternatives existe-t-il pour présenter des données tabulaires sur des vues mobiles à l'aide de Bootstrap?

twitter-bootstrap twitter-bootstrap-3 ganders
la source
2
J'ai remarqué que Bootstrap 3.0 allait être «mobile first». Quelqu'un pense-t-il qu'il résoudra ce «problème» des tables mobiles?
Les tableaux semblent toujours être les mêmes dans Bootstrap 3. :(
Giles Roberts
1
@GilesRoberts Si par "le même dans Bootstrap 3" vous voulez dire "maintenant réactif dans Bootstrap 3" alors oui, ils sont les mêmes .
ta.speot.is
@ ta.speot.is Ils sont meilleurs maintenant que dans les candidats à la libération. Tous les exemples là-bas n'ont cependant que 4 colonnes. Ne fonctionne toujours pas très bien pour les grandes tables. J'ai fini par utiliser une solution avec une première colonne fixe et tout le reste défilant.
Giles Roberts
@ ta.speot.is Je viens de voir votre réponse ci-dessous. Manqué que Bootstrap 3 a une classe sensible à la table. Fonctionne bien si vous n'avez pas besoin que certaines colonnes soient toujours visibles.
Giles Roberts

Réponses:

122

Bootstrap 3 introduit des tables réactives :

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

Bootstrap 4 est similaire, mais avec plus de contrôle via de nouvelles classes :

... réactif dans toutes les fenêtres ... avec .table-responsive. Ou, choisissez un point d'arrêt maximal avec lequel avoir une table réactive en utilisant .table-responsive{-sm|-md|-lg|-xl}.

Nous remercions Jason Bradley pour avoir fourni un exemple:

Tableaux réactifs

ta.speot.is
la source
6
Je vous remercie. Comme 99,9% des gens, je n'ai pas pris la peine de lire la documentation de la mise à jour. Je suppose que j'aurais dû.
David Bélanger
1
En effet, ça l'est ! De plus, il fait ce que je voulais en premier lieu, donc pour moi, c'est un 2 en 1!
David Bélanger
Que fait exactement la table-responsiveclasse? La documentation Bootstrap dit "pour les faire défiler horizontalement", mais je ne remarque pas de différence liée au défilement. La seule différence que je remarque est que la table a des bordures à l'extérieur lorsqu'elle est inférieure à une certaine taille d'écran ( comme le montre l'exemple ).
Dennis
5
@ ta.speot.is J'ai réalisé que j'avais mal lu la documentation et que j'utilisais la classe de manière incorrecte. J'ajoutais .table-responsiveà la table elle-même (par exemple <table class="table table-responsive">), au lieu d'envelopper la table .table-responsive, ce que vous avez même souligné dans votre exemple.
Dennis
1
@PirateApp Utiliser hidden-*sur les tds des colonnes que vous souhaitez masquer getbootstrap.com/docs/3.3/css/#responsive-utilities
ta.speot.is
68

Vous pouvez également envisager d'essayer l'une de ces approches, car les tables plus grandes ne sont pas vraiment conviviales sur mobile, même si cela fonctionne:

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

J'ai un faible pour «No More Tables», mais cela dépend évidemment de votre application.

Accords
la source
3
Lien fantastique et trois très bonnes solutions! J'ai dû google pour revenir à cette question juste pour voter pour votre réponse. Merci!
Simon
2
Une réponse qui consiste uniquement en un lien est une mauvaise étiquette Stack Overflow. La page peut disparaître, le contenu de la page peut changer, la réponse n'est pas immédiatement visible, la réponse ne peut pas être améliorée, etc. BTW, le lien ne pointe plus vers le contenu correct.
Dennis
D'accord, mais pour l'instant: web.archive.org/web/20130725223053/http://elvery.net/demo/…
Accords
1
@Dennis a raison. Veuillez élaborer votre réponse pour résumer le contenu du lien et conserver le lien également pour les démos et plus de détails. Vous obtenez néanmoins mon vote positif car le lien est super intéressant. À votre santé.
Mario Awad