Адаптивные таблицы

Здесь вы узнаете как сделать адаптивную таблицу.

Как сделать адаптивные таблицы

Адаптивные таблицы отображают горизонтальную полосу прокрутка, если ширина экрана будет слишком маленькой, чтобы показать таблицу целиком. Измените размер окна браузера, чтобы увидеть эффект:

Имя	Фамилия	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки	Очки
Джил	Смит	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
Адам	Джонсон	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67

Чтобы создать адаптивную таблицу, добавьте контейнерный элемент с CSS свойством overflow-x: auto вокруг элемента <table>:

Пример


<div style="overflow-x: auto;">
  <table>
    ...
  </table>
</div>

Попробовать самому »

Примечание: На системах OS X Lion (Mac) по умолчанию полосы прокрутки скрыты и показываются только во время использования (даже если установлено свойство overflow: scroll или overflow: auto).

Карточки

Список дел