,

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. K DN
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
LV HW UPE/m
537261 AO 250 2500 2580 390 450 70 463 185 D D 390 450 70 463 185 D D

54,00 CHF

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