Hoe te maken: responsieve tabel

Leer hoe je een responsieve tabel kunt maken.

Responsieve tabel

Als het scherm te klein is om alle inhoud te tonen, wordt een horizontale schuifbalk weergegeven in de responsieve tabel.

Pas de grootte van het browservenster aan om de effecten te zien:

Voornaam Achternaam Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve 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, voeg een element met overflow-x:auto van de container-elementen:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Probeer het zelf eens uit

Let op:In OS X Lion (op Mac), de schuifbalk is standaard verborgen en wordt alleen weergegeven bij gebruik (zelfs als "overflow:scroll" of auto is ingesteld).

Related pages

Tutorial:CSS table