Hvordan oprettes: Responsiv tabel

Lær hvordan man opretter en responsiv tabel.

Responsiv tabel

Hvis skærmen er for lille til at vise alt indhold, viser den responsiv tabel en horizontal rullespore.

Juster browservinduesstørrelsen for at se effekten:

Fornavn Efternavn 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

For at oprette en responsiv tabel, tilføj en element, der indeholder overflow-x:auto container-elementen:

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

Prøv det selv

Bemærk:I macOS Løve (Mac 上)，viser rullesporet standardmæssigt ikke, men viser kun, når den bruges (selvom "overflow:scroll" eller auto er indstillet).

Relaterede sider

Tutorial:CSS tabel