Jak na to – responzivní tabulky
Naučte se, jak vytvořit responzivní tabulku.
Responzivní tabulky
Pokud je obrazovka příliš malá na zobrazení celého obsahu, v responzivní tabulce se zobrazí vodorovný posuvník. Změňte velikost okna prohlížeče, abyste viděli efekt:
Jméno | Příjmení | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Kovář | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Předvečer | Jacksone | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adame | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Chcete-li vytvořit responzivní tabulku, přidejte prvek kontejneru s overflow-x:auto
kolem <table>:
Příklad
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Poznámka: V OS X Lion (na Macu) jsou posuvníky ve výchozím nastavení skryté a zobrazují se pouze při použití (i když je nastaveno "overflow:scroll" nebo auto).
Tip: Další informace o stylování tabulek naleznete v našem výukovém programu pro tabulky CSS .