Wie kann man mit Bootstrap Tabellen auf Mobilgeräten anzeigen?

90

Meine Tabellen werden auf dem Desktop gut angezeigt, aber sobald ich versuche, die mobile Version anzuzeigen, ist meine Tabelle zu breit für den Bildschirm des mobilen Geräts. Ich verwende ein ansprechendes Layout.

Wie kann ich Tabellenbreiten für die mobile Ansicht festlegen? Welche anderen Alternativen gibt es, um tabellarische Daten in mobilen Ansichten mithilfe von Bootstrap darzustellen?

twitter-bootstrap twitter-bootstrap-3 Gander
quelle
2
Ich habe festgestellt, dass Bootstrap 3.0 "zuerst mobil" sein wird. Glaubt jemand, dass er dieses "Problem" der mobilen Tabellen lösen wird?
Tabellen scheinen immer noch die gleichen in Bootstrap 3 zu sein. :(
Giles Roberts
1
@GilesRoberts Wenn mit "dasselbe in Bootstrap 3" "jetzt in Bootstrap 3 ansprechend" gemeint ist, dann sind sie gleich .
ta.speot.is
@ ta.speot.is Sie sind jetzt besser als in den Release-Kandidaten. Alle Beispiele dort haben jedoch nur 4 Spalten. Funktioniert immer noch nicht sehr gut für breite Tische. Am Ende habe ich eine Lösung mit einer festen ersten Spalte und dem Rest des Bildlaufs verwendet.
Giles Roberts
@ ta.speot.is Habe gerade deine Antwort unten gesehen. Es wurde verpasst, dass Bootstrap 3 eine auf Tabellen reagierende Klasse hat. Funktioniert gut, wenn bestimmte Spalten nicht immer sichtbar sein müssen.
Giles Roberts

Antworten:

122

Bootstrap 3 führt reaktionsfähige Tabellen ein :

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

Bootstrap 4 ist ähnlich, aber mit mehr Kontrolle über einige neue Klassen :

... über alle Ansichtsfenster hinweg ansprechbar ... mit .table-responsive. Oder wählen Sie mithilfe von einen maximalen Haltepunkt aus, bis zu dem eine reaktionsfähige Tabelle erstellt werden soll .table-responsive{-sm|-md|-lg|-xl}.

Dank an Jason Bradley für die Bereitstellung eines Beispiels:

Responsive Tabellen

ta.speot.is
quelle
6
Danke dir. Wie 99,9% der Menschen habe ich mir nicht die Mühe gemacht, die Dokumentation des Updates zu lesen. Ich denke ich hätte es tun sollen.
David Bélanger
1
Tatsächlich ist es ! Außerdem macht es das, was ich wollte, also ist es für mich ein 2 in 1!
David Bélanger
Was genau macht die table-responsiveKlasse? In den Bootstrap-Dokumenten heißt es "damit sie horizontal scrollen", aber ich bemerke keinen Unterschied beim Scrollen. Der einzige Unterschied, den ich bemerke, ist, dass die Tabelle bei einer bestimmten Bildschirmgröße ( wie im Beispiel gezeigt ) außen umrandet wird .
Dennis
5
@ ta.speot.ist mir wurde klar, dass ich die Dokumentation falsch gelesen und die Klasse falsch verwendet habe. Ich .table-responsivehabe der Tabelle selbst hinzugefügt (z. B. <table class="table table-responsive">), anstatt die Tabelle einzuwickeln .table-responsive, worauf Sie in Ihrem Beispiel sogar hingewiesen haben.
Dennis
1
@PirateApp Verwenden Sie hidden-*für die tds der Spalten, die Sie ausblenden möchten getbootstrap.com/docs/3.3/css/#responsive-utilities
ta.speot.is
68

Sie können auch einen dieser Ansätze ausprobieren, da größere Tabellen auf Mobilgeräten nicht gerade benutzerfreundlich sind, selbst wenn sie funktionieren:

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

Ich bin ein Teil von 'No More Tables', aber das hängt natürlich von Ihrer Anwendung ab.

Akkorde
quelle
3
Fantastischer Link und drei wirklich tolle Lösungen! Ich musste meinen Weg zurück zu dieser Frage googeln, um Ihre Antwort zu verbessern. Vielen Dank!
Simon
2
Eine Antwort, die nur aus einem Link besteht, ist eine schlechte Stapelüberlauf-Etikette. Die Seite könnte verloren gehen, der Inhalt der Seite kann sich ändern, die Antwort ist nicht sofort sichtbar, die Antwort kann nicht verbessert werden und so weiter. Übrigens zeigt der Link nicht mehr auf den richtigen Inhalt.
Dennis
Einverstanden, aber vorerst
Akkorde
1
@ Tennis ist richtig. Bitte erläutern Sie Ihre Antwort, um zusammenzufassen, was in dem Link enthalten ist, und behalten Sie den Link auch für Demos und weitere Details bei. Du bekommst trotzdem meine Gegenstimme, da der Link super interessant ist. Prost.
Mario Awad