Как создать: отзывчивая таблица

Узнайте, как создать отзывчивую таблицу.

Отзывчивая таблица

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

Измените размер окна браузера, чтобы увидеть эффект:

Имя Фамилия Points Points Points Points Points Points Points 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 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 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 67 67 67 67 67 67 67

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

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

Попробуйте сами

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

Соответствующие страницы

Уроки:CSS таблица