Tabelle vertical Scrollbar machen (Responsive Table)
HTML Tabellen sind ein gern ein gesetztes Mittel auf Webseiten.
Leider eigenen sich solche Tabellen nur sehr bedingt auf
Responsiv Seiten. Hierzu gibt es einen Trick, wie man auch Breite Tabellen auf kleineren Geräten problemlos darstellen
kann.
Hierzu zeige ich euch ein Beispiel einer solchen Tabelle:
Diese Tabelle beinhltet viele Produktedetails und ist von der Breite her schnell ein Problem auf kleineren Auflösungen.
Der Trick ist nun, die Tabelle vertikal Scrollbar zu machen. Dies ist mit einem sehr kleinen CSS Code möglich.
Dazu ergänzen wir die Tabelle selbst mit 100% Breite und erstellen ein Div um die Tabelle mit der Classe table-responsiv:
<div class="table-responsiv"> <table width="100%">...</table> </div>
Und nehmen folgenden CSS Code im stylesheet auf:
.table-responsiv { width: 100%; padding: 0px; margin-bottom: 0px; overflow-y: hidden; border: 1px solid #DDD; overflow-x: auto; min-height: 0.01%; }
Das Endprodukt sieht folgendermassen aus:
So einfach lässt sich eine Tabelle vertical Scrollbar machen mit wenig Aufwand, welche auf allen Devices funktioniert.