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

Здравствуйте. Как сверстать данную таблицу адаптивно?
01bc80c5e33b4c6f947fa3ded381d1c2.jpg
  • Вопрос задан
  • 461 просмотр
Пригласить эксперта
Ответы на вопрос 6
@GreatRash
Поговорить на данную тему с дизайнером для начала.
Ответ написан
Комментировать
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Начать с meta viewport.
2. Проверить данные таблицы. Например "Режим работы - есть" - очень хорошо, что он есть и очень смешно.
3. "Поддержка" - данные заменить на 0р, $, $
4. С портом - тоже придумать как сократить.
5. Слова в кнопках "Заказать" заменить, например, на галочки для маленьких экранов. Или на "заказ", потому что ширины поля с ценой и названием тарифа как раз должно хватить.

И все аккуратненько поместится.
Ответ написан
Комментировать
EPIDEMIASH
@EPIDEMIASH
Человек швейцарский нож
Согласен с GreatRash. Адаптивную верстку прежде всего так же должен продумывать дизайнер, которые рисует макет. Что касается адаптации данной таблицы, тоже надо посмотреть где у вас будет она располагаться.

Прежде всего любую адаптивную верстку советую начинать с мета тега:
<meta name="viewport" content="width=device-width">


Который будет определять начальную ширину экрана пользователя.

Рассчитайте проценты ширины блока в котором она будет находится, с учетом пейдингов. И добавьте пару медиа запросов, под разные разрешения.
Ответ написан
Комментировать
andykov
@andykov
Shit happens
С такой структурой проще всего включать горизонтальную прокрутку на моб. устройствах.
Пример v4-alpha.getbootstrap.com/content/tables/#responsi...
Тут еще разные примеры https://elvery.net/demo/responsive-tables/
Ответ написан
Комментировать
dimka-dooz
@dimka-dooz
front-end разработчик)
Не забывайте, что главная цель таблицы это сравнения представленных данных, поэтому разбивать таблицу это не правильно, горизонтальная прокрутка один из самых правильных вариантов, a вот реализаций может быть много. C js и без.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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