2013-02-13 10 views
74

Meine Tabellen werden auf dem Desktop angezeigt, aber sobald ich versuche, die mobile Version anzuzeigen, ist mein Tisch für den Bildschirm des mobilen Geräts zu breit. Ich verwende ein responsives Layout.Wie können Tabellen mit Bootstrap auf dem Handy angezeigt werden?

Wie kann ich Tischbreiten für die mobile Ansicht einstellen? Welche anderen Alternativen gibt es, um tabellarische Daten in mobilen Ansichten mit Bootstrap darzustellen?

+2

Ich bemerkte, dass Bootstrap 3.0 sein wird, Glaubt jemand, dass sie dieses "Problem" der mobilen Tische lösen werden? – crzrcn

+0

Tabellen scheinen immer noch die gleichen in Bootstrap 3. :( –

+1

@GilesRoberts [Wenn durch "das gleiche in Bootstrap 3" Sie "jetzt reagieren in Bootstrap 3" dann ja, sie sind die gleichen] (http: // getbootstrap.com/css/#tables-responsive). –

Antwort

95

Bootstrap 3 führt responsive tables:

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

Credit Jason Bradley für die Bereitstellung ein Beispiel: "Mobile first"

Responsive Tables

+3

Danke. Wie 99,9% der Leute habe ich nicht die Dokumentation des Updates gelesen. Ich denke, ich hätte es tun sollen. –

+1

@ DavidBélanger Dokumentation ist eine wunderbare Sache :) –

+1

In der Tat ist es! Außerdem macht es genau das, was ich wollte, also ist es für mich eine 2 in 1! –

3

Alle Tabellen im Bootstrap werden entsprechend dem Container, in dem sie sich befinden, gedehnt. Sie können Ihre Tabellen innerhalb eines .span Elements platzieren, um die Größe zu steuern. Diese Frage SO Sie können

Why do Twitter Bootstrap tables always have 100% width?

52

helfen auch eines dieser Ansätze betrachten könnte versuchen, da größere Tabellen sind nicht gerade freundlich auf Handy, auch wenn es funktioniert:

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

Ich bin Teil von "No More Tables", aber das hängt natürlich von Ihrer Bewerbung ab.

+2

Fantastische Verbindung und drei wirklich großartige Lösungen! Ich musste mich googeln zurück zu dieser Frage, nur um Ihre Antwort zu verbessern. Danke! – Simon

+2

Eine Antwort, die nur aus einem Link besteht, ist schlecht Stack Overflow e Triquette. Die Seite könnte verschwinden, der Inhalt auf der Seite könnte sich ändern, die Antwort ist nicht sofort sichtbar, die Antwort kann nicht verbessert werden, und so weiter. BTW der Link zeigt nicht mehr auf den richtigen Inhalt. – Dennis

+0

Einverstanden, aber jetzt: https://web.archive.org/web/20130725223053/http://elvery.net/demo/responsive-tables – Chords

Verwandte Themen