Zum Inhalt

Tabellen für mobile Geräte optimieren

Auch wenn ich überhaupt kein Freund von Tabellen bin, gibt es natürlich dennoch ab und zu Kunden, die ohne Tabellen ihre Daten nicht darstellen können bzw. wollen. Das sieht auf dem Desktop und Tablet vielleicht ok aus, aber spätestens auf dem Handy gibt es dann Probleme. Wie soll man auch eine horizontale Tabelle mit 10 Spalten auf dem Handy im Poträt-Format darstellen?

Dafür gibt es eine ganz coole Lösung wie ich finde:

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {

table, thead, tbody, th, td, tr {
display: block;
}
   
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
   
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
   
td:before {
    float: left;
    margin-left: 10px;
}
}

Der eigentlich Trick dabei ist nun, dass man die Labels der Tabelle vor den Inhalten integriert:

td:nth-of-type(1):before { content: "Zeile 2"; }
td:nth-of-type(2):before { content: "Zeile 2"; }
td:nth-of-type(3):before { content: "Zeile 3"; }
td:nth-of-type(4):before { content: "Zeile 4"; }
td:nth-of-type(5):before { content: "Zeile 5"; }

Das Problem ist nun, dass die Labels nun auf alle Tabellen angewandt werden. Also muss man entweder mit unterschiedlichen Klassen arbeiten, oder den CSS nur auf die gewünschten Seiten anwenden.

Veröffentlicht inCSS

Schreibe den ersten Kommentar

Schreibe einen Kommentar

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

fünf − 4 =