Как сделать - Отзывчивую таблицу
Узнать, как создать отзывчивую таблицу с помощью 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 Таблицы чтобы узнать больше о том, как стилизовать таблицы.