Михаил 2016-08-17 1 Bootstrap 1

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

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

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

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

Тут она еще полностью помещается в окно, поэтому горизонтального скролла не образуется. Как я уже говорил, таблица будет ужиматься, насколько это возможно, но если в ней много содержимого, то однажды настанет момент, когда все-таки содержимое перестанет помещаться в окно и появиться скролл.

В итоге, на мобильных телефонах и смартфонах наша таблица будет выглядеть примерно так:

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

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

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

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

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

Да, она по-прежнему не влазит в блок. Решить эту проблему можно только если уменьшить величину содержимого. Но зато никакого скролла у всей страницы не образуется — скролл только внутри самой таблицы, так что ее можно прокручивать вправо и влево.

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.