Как сделать - Отзывчивую таблицу
Узнать, как создать отзывчивую таблицу с помощью 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>:
Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если установлен параметр "overflow:scroll" или auto).
Зайдите на наш учебникCSS Таблицы чтобы узнать больше о том, как стилизовать таблицы.
