Über den Author / Internet / Tabelle vertical Scrollbar machen

Tabelle vertical Scrollbar machen

~1 Min. Lesezeit

Bild 20160105 002HTML Tabellen sind ein gern eingesetztes 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:
Bild 20160105 001
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-responsive {
    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
LVHWUPE/m
537261AO2502500258039045070463185DD

54,00 CHF

Zzgl. 0% MwSt.

537262AO3002500258044053270538215DD

58,00 CHF

Zzgl. 0% MwSt.

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

About Stefan

avatar
Ein männlicher IT Nerd, durchstöbert das Web nach speziellen Gadgets, unentbehrlicher Software und Alles was man im IT Sektor nicht verpassen darf.Immer hilfsbereit wenn Probleme zu lösen sind oder das Unmögliche umgesetzt werden sollte.

Weitere interessante Artikel

PHP Trojaner (Teil 4: Codierte Uploader Infektion)

~2 Min. LesezeitNicht jeder PHP Trojaner kann auf den ersten Blick identifiziert werden, was der …

PHP Trojaner (Teil 3: Spamsender Infektion)

~1 Min. LesezeitSpam ist ein grosses Problem der heutigen Zeit, doch wer verschickt Spam und …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg