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

Question

[Артём Цымбалюк]

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

Answer 1

[GreatRash]

Поговорить на данную тему с дизайнером для начала.

Answer 2

[iBird Rose]

примерно так demo.umi-cms.spb.su/demos/tableFixCol/1.html

Comments

[Артём Цымбалюк]

iBird Rose буду пробовать

Answer 3

[Ankhena]

1. Начать с meta viewport.
2. Проверить данные таблицы. Например "Режим работы - есть" - очень хорошо, что он есть и очень смешно.
3. "Поддержка" - данные заменить на 0р, $, $
4. С портом - тоже придумать как сократить.
5. Слова в кнопках "Заказать" заменить, например, на галочки для маленьких экранов. Или на "заказ", потому что ширины поля с ценой и названием тарифа как раз должно хватить.

И все аккуратненько поместится.

Answer 4

[Владимир Юрченков]

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

Прежде всего любую адаптивную верстку советую начинать с мета тега:

<meta name="viewport" content="width=device-width">

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

Рассчитайте проценты ширины блока в котором она будет находится, с учетом пейдингов. И добавьте пару медиа запросов, под разные разрешения.

Answer 5

[Андрей Б.]

С такой структурой проще всего включать горизонтальную прокрутку на моб. устройствах.
Пример v4-alpha.getbootstrap.com/content/tables/#responsi...
Тут еще разные примеры https://elvery.net/demo/responsive-tables/

Answer 6

[Дмитрий Клусевич]

Не забывайте, что главная цель таблицы это сравнения представленных данных, поэтому разбивать таблицу это не правильно, горизонтальная прокрутка один из самых правильных вариантов, a вот реализаций может быть много. C js и без.