Hier ist ein JS-Bin-Link: Ссылка
Die reaktionsfähige Tabelle wird nicht verkleinert, um in das Panel zu passen. Wie kann ich das beheben?
EDIT: Ich suche nach einer Lösung, bei der die reaktionsfähige Tabelle so skaliert wird, dass sie in das Panel passt, ohne dass das Panel größer werden muss.
Die .table-responsive -Klasse wurde nur für mobile Geräte entwickelt ...
Aus der Bootstrap 3.1.1 Dokumentation ...
Erstellen Sie reaktionsfähige Tabellen, indem Sie eine beliebige .table in .table-responsive umwandeln, damit sie horizontal zu kleinen Geräten (unter 768px) scrollt. Wenn Sie auf etwas größer als 768px weit sehen, sehen Sie keinen Unterschied in diesen Tabellen
Aber Sie können die Klasse in Ihre CSS ohne die Medienabfrage hinzufügen und erhalten die Funktionalität in jedem Ansichtsfenster.
Beachten Sie jedoch, dass dadurch die Tabelle nicht verkleinert wird, sondern nur eine horizontale Bildlaufleiste angezeigt wird ...
Unten sind die .table-responsive Klassen von Bootstrap ohne die Medienabfrage, die es auf 768px und darunter beschränkt.
Es gibt ein paar mehr CSS-Regeln für .table-bordered , die ich nicht einbezogen habe ...
Dies passiert, weil Panel diese Klasse hat:
%Vor%das seine Breite erzwingt. Entfernen Sie es und alles wird in Ordnung sein: -)
Die Verwendung von Containern hat auch Auswirkungen darauf. Wenn Ihr Layout kein festes Layout hat, verwenden Sie container-fluid , und es wird kein Problem mit der Reaktionsfähigkeit von .table geben.
Tags und Links css twitter-bootstrap twitter-bootstrap-3