Hur man skapar: Responsiv tabell

Lär dig hur du skapar responsiva tabeller.

Responsiv tabell

Om skärmen är för liten för att visa allt innehåll, visas en horisontell rullgardin för den responsiva tabellen.

Justera storleken på webbläsarfenstret för att se effekten:

Förnamn Efternamn Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng Poäng
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

För att skapa en responsiv tabell, lägg till en container som innehåller overflow-x:auto container-elementen:

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

Prova själv

Observera:I OS X Lion (Mac på) är rullgardin standardmässigt dold, och visas endast när den används (även om "overflow:scroll" eller auto är inställt).

Relaterade sidor

Tutorial:CSS-tabeller