,

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:

Art.-Nr.KDN
mm
L
mm
l1
mm
OD
mm
ODm
mm
W
mm
G
kg/St
G
kg/m
L
mm
l1
mm
OD
mm
ODm
mm
W
mm
G
kg/St
G
kg/m
LVHWUPE/m
537261AO2502500258039045070463185DD39045070463185DD

54,00 CHF

So einfach lässt sich eine Tabelle vertical Scrollbar machen mit wenig Aufwand, welche auf allen Devices funktioniert.