Как вместить большую таблицу в контейнер bootstrap?

Question

[Александр Прощенков]

Вывожу данные из базы данных в таблицу на сайт
Таблица в контейнере бутстрап,

<div class="container">
</div>

В таблице больше 15(а в теории может быть и 30) колонок, и таблица вылезает за контейнер, какие есть варианты ее туда "впихнуть"?
Вот скрин таблицы:

также строк может быть 30, повернуть таблицу не вариант

Answer 1

[Сергей delphinpro]

.container-fluid
  .table-responsive
    table.table

.container-fluid — это чтобы дать возможность пользователям с большими мониторами нормально просматривать таблицу
.table-responsive — этот стиль завернёт таблицу в скроллящийся контейнер. Для больших моников страховка, для маленьких необходимость
ну а внутри сама таблица.

Для мобильных устройств нужно будет пересмотреть вид отображения таблицы. Либо оставить скролл-контейнер. Методы адаптации таблиц под мобильники уже сто раз описаны, ничего нового за последние годы не придумали. Гуглить по запросу css responsive table

Comments

[Александр Прощенков]

А как сделать так, чтобы слева оставалась одна колонка, даже если листаешь влево?

[Сергей delphinpro]

Александр Прощенков, Тут без js уже не обойтись.

Попробуйте этот замечательный мега-плагин https://www.datatables.net/
Вот с этим расширением https://www.datatables.net/extensions/fixedcolumns/
Пример — https://www.datatables.net/extensions/fixedcolumns...