Адаптивная таблица CSS
Адаптивная таблица
Адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения всего содержимого:
Имя | Фамилия | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Джилл | Смит | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
канун | Джексон | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Адам | Джонсон | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Добавьте элемент-контейнер (например, <div>) overflow-x:auto
вокруг элемента <table>, чтобы сделать его отзывчивым:
Пример
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Примечание. В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено «overflow:scroll»).
Дополнительные примеры
В этом примере показано, как создать причудливую таблицу.
В этом примере показано, как расположить заголовок таблицы.
Свойства таблицы 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 |