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

Question

[Gennady Dorokhin]

Всем привет.
Клиент захотел сделать дизайн табличкой.
Вот что получилось https://vk.cc/6nbKaR
Но на мобильных и планшетах не знаем как это адаптировать.
Помогите советом. Заранее спасибо.

Comments

[Gennady Dorokhin]

Народ, блоками сверстано, а не таблицей)

[Gennady Dorokhin]

Вы немного не то предлагаете)

Answer 1

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

С данной таблицей только одно решение.
Обернуть в div и задать ему overflow-x: scroll.
Т.е. сделать таблицу единственным элементом, который можно скроллить по горизонтали.
Тут таблица сложная и перестроить элементы не потеряв информативность нельзя.
Ну, а если хотите заморочиться, то вам сюда https://css-tricks.com/responsive-data-tables/

Answer 2

[quramolt]

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

ЗЫ. Выглядит, кстати, круто и красиво для такого технического сайта!

Comments

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

ЗЫ. Выглядит, кстати, круто и красиво для такого технического сайта!

В открытом состоянии только не хватает какого-то разделителя между блоками, откроешь два блока и они сливаются.

Answer 3

[Саша]

Gennady Dorokhin вам случайно верстальщик не нужен в компанию?)
что бы не возникало вопросов как делать адаптивность таблиц и остальных элементов))

Comments

[Gennady Dorokhin]

Пишите в скайп https://docs.google.com/document/d/17UVywmQD_o2hL3...

[Саша]

Gennady Dorokhin: ограничен доступ по ссылке)
написал на почту

Answer 4

[Степан Крапивин]

* для узких экранов убирать padding в минимум.
* располагать друг над другом слишком широкие колонки
https://drive.google.com/file/d/0B9B9F2yBkwWLQXJYd...

Answer 5

[Дмитрий Христоев]

frontender.info/simple-responsive-table

Answer 6

[Ankhena]

1. Простой: обертка и прокрутка.
2. Сложный: изменять количество ячеек. Например, оставить только название, остальную информацию показывать уже при развернутой карточке. Или располагать "баночки" в столбик. И т.д.

Answer 7

[Полина Емельянова]

Покурите и мой вариант
https://bugoaneo.github.io/ashtanga/#tickets

Если что - пишите в личку, отдам код.)))