Как сделать адаптивные таблицы
Узнайте, как создать адаптивную таблицу.
Адаптивные таблицы
Адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения всего содержимого. Измените размер окна браузера, чтобы увидеть эффект:
Имя | Фамилия | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Джилл | Смит | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
канун | Джексон | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Адам | Джонсон | 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) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено «overflow:scroll» или auto).
Совет: перейдите к нашему руководству по таблицам CSS , чтобы узнать больше о том, как стилизовать таблицы.