web-dev-qa-db-fra.com

Comment afficher des tables sur un mobile à l'aide de Bootstrap?

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

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

twitter-bootstraptwitter-bootstrap-3
81
user810606

Bootstrap 3 introduit tables sensibles :

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

Bootstrap 4 est similaire, mais avec plus de contrôle via certaines 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 sensible à l'aide de .table-responsive{-sm|-md|-lg|-xl}.

Nous remercions Jason Bradley d'avoir fourni un exemple:

Responsive Tables

112
ta.speot.is

Vous pouvez également 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/

Je suis partial pour 'No More Tables' mais cela dépend évidemment de votre application.

62
Chords

Toutes les tables de bootstrap s’étendent en fonction du conteneur dans lequel elles se trouvent. Vous pouvez placer vos tables dans un .span élément pour contrôler la taille. Cette SO Question peut vous aider

Pourquoi Twitter Bootstrap ont-elles toujours une largeur de 100%?

4
Matt Busche