Как сверстать адаптивно таблицу?

Question

[Вячеслав Яшников]

Как лучше сверстать таблицу адаптивно? Мой вариант: статичная левая часть, а правая помещена в overflow:auto и при уменьшении окна прокручивается, но делал я это блоками. Может есть более разумное решение? P.S обращу внимание на декорацию над столбцами, Ее бы в идеале тоже сохранить

Answer 1

[zooks]

https://css-tricks.com/responsive-data-tables/

Самый расхожий и простой вариант - сделать враппер для таблиц (на jQuery) и горизонтальный скролл в нем (CSS).

Comments

[Вячеслав Яшников]

не понимаю, а зачем тут jquery? разве недостаточно overflow:auto; ?

[zooks]

Вячеслав Яшников: для того, чтобы обернуть в div, который уже будет иметь стиль overflow.

[Вячеслав Яшников]

zooks: а нельзя таблицу поместить в div?

[zooks]

Вячеслав Яшников: конечно можно, но имхо неудобно - на объемных сайтах могут быть сотни таблиц.

Answer 2

[dom1n1k]

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

Я бы на мобильных устройствах левую колонку превратил бы межстрочные заголовки. Типа:

Вид аренды
Посуточно     Посуточно     Помесячно      Помесячно
Оплата агентских услуг
Ежемесячно    3 месяца      Ежемесячно     Единоразово

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

Comments

[Сергей Горячев]

Придется теперь вернуть прайс на сайт, который я скрыл. Мне лень было таблицу перестраивать, но посмотрел сейчас, прилично смотрится. У меня правда 3 столбца с тарифами)

Answer 3

[Сергей Горячев]

Пока я готовил пример, dom1n1k всё написал уже.
https://jsfiddle.net/webirus/jocbkj35/

Answer 4

[Александр Ружевич]

если работаете с бутстрапом сделайте все на нем, просто и быстро, он заадаптивит за вас, вы только подправите небольшие косяки на xs

Answer 5

[mletov]

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

Answer 6

[_ umr]

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

Comments

[zooks]

Вы точно читали мой ответ?