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 | Устанавливает алгоритм компоновки (макет), который будет использоваться для таблицы |
