Узнать, как создать адаптивную таблицу используя HTML, CSS.
Адаптивная таблица
Адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого. Измените размер окна браузера, чтобы увидеть эффект:
| Имя | Фамилия | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Татьяна | Щипунова | 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 Таблицы чтобы узнать больше о том, как стилизовать таблицы.