Как сделать - Адаптивную таблицу
Узнайте, как создать адаптивную таблицу.
Адаптивные таблицы
Реагирующая таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого. Измените размер окна обозревателя, чтобы увидеть эффект:
First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Eve | 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 |
Чтобы создать адаптивную таблицу, добавьте элемент-контейнер overflow-x:auto
вокруг <TABLE>:
Пример
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка» или «авто»).
Перейдите в наш Учебник CSS таблицы, чтобы узнать больше о том, как стиль таблиц.