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