CSS responzivní tabulka
Responzivní tabulka
V responzivní tabulce se zobrazí vodorovný posuvník, pokud je obrazovka příliš malá na zobrazení celého obsahu:
Jméno | Příjmení | 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 |
Předvečer | Jacksone | 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 |
Přidejte prvek kontejneru (jako <div>) s overflow-x:auto
kolem prvku <table>, aby byl responzivní:
Příklad
<div style="overflow-x:auto;">
<table>
... table content ...
</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“).
Další příklady
Tento příklad ukazuje, jak vytvořit ozdobnou tabulku.
Tento příklad ukazuje, jak umístit titulek tabulky.
Vlastnosti tabulky CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |