Как делается в Bootstrap адаптивная таблица?

Адаптировать таблицу — с фреймворком Bootstrap это просто. По умолчанию табличные данные сжимаются, но когда это больше невозможно, все-таки возникает горизонтальный скролл. Сегодня мы посмотрим, как решается эта проблема, как делается с помощью Bootstrap адаптивная таблица.

Ну для начала давайте создадим саму таблицу, пусть в ней будет 2 ряда, в каждом по 4 ячейки. Блоку-контейнеру, который будет оборачивать таблицу, зададим такие классы:

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

<div class = "col-md-4 col-sm-6 col-xs-8">

То есть на средних и больших устройствах наша таблица будет занимать 4 колонки из 12, на маленьких устройствах — половину ширины, а на самых маленьких — две трети. Отлично, теперь я буду сужать ширину экрана, чтобы смотреть, как себя будет вести таблица. Вот так она выглядит примерно на ширине 700 пикселей:
таблица
Тут она еще полностью помещается в окно, поэтому горизонтального скролла не образуется. Как я уже говорил, таблица будет ужиматься, насколько это возможно, но если в ней много содержимого, то однажды настанет момент, когда все-таки содержимое перестанет помещаться в окно и появиться скролл.

В итоге, на мобильных телефонах и смартфонах наша таблица будет выглядеть примерно так:
неадаптивная таблица
Во-первых, она не помещается в свой блок (я задал блоку-контейнеру красную границу). Во-вторых, не помещается она и в само окно, поэтому для всей веб-страницы появляется горизонтальный скролл.

Решение проблемы

Решение не очень очевидно — обернуть всю таблицу в блок с классом table-responsive. То есть вот так:

<div class = "table-responsive">
<table class = "table">
Содержимое…
</table>
</div>

Ну а все это, в свою очередь, вы можете обернуть в блок, находящийся в сетке bootstrap (тот, что с классами col-). И вот так преображается таблица:
адаптивная таблица
Да, она по-прежнему не влазит в блок. Решить эту проблему можно только если уменьшить величину содержимого. Но зато никакого скролла у всей страницы не образуется — скролл только внутри самой таблицы, так что ее можно прокручивать вправо и влево.

Кстати, такой прием очень часто может даже не пригодится. Например, если бы в нашей таблице было 2 ячейки, а не 4, либо количество текста в ячейках было немного меньше. Но в нашем случае содержимое занимает по ширине больше места, так что этот прием позволяет избавиться от горизонтальной прокрутки для всей страницы.

Понравилась статья? Поделиться с друзьями:
Комментариев: 1
  1. Александр

    Интересный вариант! Спасибо!

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: