Tabela responsywna CSS
Responsywna tabela
Tabela responsywna wyświetli poziomy pasek przewijania, jeśli ekran jest zbyt mały, aby wyświetlić pełną zawartość:
Imię | Nazwisko | 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 |
przeddzień | Jackson | 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 |
Dodaj element kontenera (np. <div>) overflow-x:auto
wokół elementu <table>, aby był responsywny:
Przykład
<div style="overflow-x:auto;">
<table>
... table content ...
</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 „overflow:scroll”).
Więcej przykładów
Ten przykład pokazuje, jak stworzyć fantazyjny stół.
Ten przykład pokazuje, jak ustawić podpis tabeli.
Właściwości tabeli 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 |