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

Всем привет.
Клиент захотел сделать дизайн табличкой.
Вот что получилось https://vk.cc/6nbKaR
Но на мобильных и планшетах не знаем как это адаптировать.
Помогите советом. Заранее спасибо.
  • Вопрос задан
  • 322 просмотра
Пригласить эксперта
Ответы на вопрос 7
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
С данной таблицей только одно решение.
Обернуть в div и задать ему overflow-x: scroll.
Т.е. сделать таблицу единственным элементом, который можно скроллить по горизонтали.
Тут таблица сложная и перестроить элементы не потеряв информативность нельзя.
Ну, а если хотите заморочиться, то вам сюда https://css-tricks.com/responsive-data-tables/
Ответ написан
Комментировать
@quramolt
Дело не только в таблице. Если закрытую ещё можно разместить на мобильном экране, то при клике на строку открывается много разной информации, как уже замечено, сложной.
В общем, для мобильных я бы подумал об отдельном дизайне/разметке.

ЗЫ. Выглядит, кстати, круто и красиво для такого технического сайта!
Ответ написан
userAlexander
@userAlexander
Верстка наше все)
Gennady Dorokhin вам случайно верстальщик не нужен в компанию?)
что бы не возникало вопросов как делать адаптивность таблиц и остальных элементов))
Ответ написан
* для узких экранов убирать padding в минимум.
* располагать друг над другом слишком широкие колонки
https://drive.google.com/file/d/0B9B9F2yBkwWLQXJYd...
Ответ написан
Комментировать
@Haoss
html-верстальщик
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Простой: обертка и прокрутка.
2. Сложный: изменять количество ячеек. Например, оставить только название, остальную информацию показывать уже при развернутой карточке. Или располагать "баночки" в столбик. И т.д.
Ответ написан
Комментировать
bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман
Покурите и мой вариант
https://bugoaneo.github.io/ashtanga/#tickets

Если что - пишите в личку, отдам код.)))
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы