Jak tworzyć: responsywne tabele

Naucz się, jak tworzyć responsywne tabele.

Responsywna tabela

Jeśli ekran jest zbyt mały, aby wyświetlić całą zawartość, responsywna tabela będzie miała paski przewijania poziomego.

Zmniejsz rozmiar okna przeglądarki, aby zobaczyć efekty:

Imię Nazwisko Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty Punkty
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

Aby utworzyć responsywną tabelę, dodaj do <table> zawartość zawierającą overflow-x:auto elementu kontenera:

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

Spróbuj sam.

Uwaga:W systemie OS X Lion (Mac) paski przewijania domyślnie są ukryte, ale pokazują się tylko podczas użycia (nawet jeśli ustawiono "overflow:scroll" lub auto).

Strony związane

Lektura:Tabela CSS