How TO - Responsieve tabellen
Leer hoe u een responsieve tabel maakt.
Responsieve tabellen
Een responsieve tabel geeft een horizontale schuifbalk weer als het scherm te klein is om de volledige inhoud weer te geven. Verklein het browservenster om het effect te zien:
Voornaam | Achternaam | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten | Punten |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smit | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Vooravond | 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 |
Om een responsieve tabel te maken, voegt u een containerelement toe met overflow-x:auto
rond de <table>:
Voorbeeld
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Opmerking: in OS X Lion (op Mac) zijn schuifbalken standaard verborgen en worden ze alleen weergegeven wanneer ze worden gebruikt (zelfs als "overflow:scroll" of auto is ingesteld).
Tip: ga naar onze zelfstudie CSS-tabellen voor meer informatie over het opmaken van tabellen.