Jak TO - Responsywne tabele
Dowiedz się, jak stworzyć responsywną tabelę.
Responsywne tabele
Tabela responsywna wyświetli poziomy pasek przewijania, jeśli ekran jest zbyt mały, aby wyświetlić całą zawartość. Zmień rozmiar okna przeglądarki, aby zobaczyć efekt:
Imię | Nazwisko | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica | Zwrotnica |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Kowal | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
przeddzień | 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 element kontenera overflow-x:auto
wokół <table>:
Przykład
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Uwaga: W systemie OS X Lion (na Macu) paski przewijania są domyślnie ukryte i wyświetlane tylko wtedy, gdy są używane (nawet jeśli ustawiono „przepełnienie:przewijanie” lub auto).
Wskazówka: przejdź do naszego samouczka dotyczącego tabel CSS , aby dowiedzieć się więcej o stylizacji tabel.