CSS Адаптивная (отзывчивая) таблица
Адаптивная таблица
В адаптивной таблице будет отображаться горизонтальная полоса прокрутки, если экран слишком мал для отображения всего содержимого:
Имя | Фамилия | 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 |
Eve | Jackson | 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 |
Добавьте элемент контейнера (например, <div>
) с помощью overflow-x:auto
вокруг элемента <table>
, чтобы сделать его адаптивным:
Пример
<div style="overflow-x:auto;">
<table>
... содержимое таблицы ...
</table>
</div>
Попробуйте сами »
Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено "overflow:scroll"
).
Больше примеров
Сделать красивую таблицу
Этот пример демонстрирует, как создать красивую таблицу.
Установить положение заголовка таблицы
Этот пример демонстрирует, как разместить заголовок таблицы.
Проверьте себя с помощью упражнений!
CSS Свойства таблицы
Свойство | Описание |
---|---|
border | Устанавливает все свойства границы в одном объявлении |
border-collapse | Указывает, должны ли быть свернуты границы таблицы |
border-spacing | Задаёт расстояние между границами соседних ячеек |
caption-side | Задаёт размещение заголовка таблицы |
empty-cells | Указывает, следует ли отображать границы и фон в пустых ячейках таблицы |
table-layout | Устанавливает алгоритм компоновки (макет), который будет использоваться для таблицы |