How TO - Responsive Tabellen
Erfahren Sie, wie Sie eine responsive Tabelle erstellen.
Responsive Tabellen
Eine responsive Tabelle zeigt eine horizontale Bildlaufleiste an, wenn der Bildschirm zu klein ist, um den gesamten Inhalt anzuzeigen. Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen:
Vorname | Nachname | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Schmied | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Vorabend | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Um eine responsive Tabelle zu erstellen, fügen Sie ein Containerelement mit overflow-x:auto
um die <table> herum hinzu:
Beispiel
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Hinweis: In OS X Lion (auf Mac) sind Bildlaufleisten standardmäßig ausgeblendet und werden nur angezeigt, wenn sie verwendet werden (auch wenn „overflow:scroll“ oder „auto“ eingestellt ist).
Tipp: Gehen Sie zu unserem CSS-Tabellen-Tutorial , um mehr über das Gestalten von Tabellen zu erfahren.