Как верстается и адаптируется такая таблица, и таблица ли это?

Question

[marinka454545]

Ребят, у меня ступор, не знаю как сделать это, подскажите, как это сделать и как адаптировать?

Comments

[Даниил Попов]

Можно сделать блок с горизонтальным скроллом. Название опций стоят на месте, тарифы скролятся

[marinka454545]

Даниил Попов, скролл, это единственное, что мне пришло в голову) А есть какие-то другие варианты?

[Максим Тимофеев]

Это же таблица, почему не сверстать ее как таблицу? А респонсив, через горизонтальный скрол или отдельный блок для мобильных с принципиально другой структурой.

[sergski]

для десктопа масса вариантов, flex например. для моб.версиях сделайте табы

[Максим Федоров]

если вы скрин сделали с сайта, то можно на этом сайте через браузер (например Хром или Файрофкс) посмотреть, как она сделана и сделать 1 в 1 :)

Answer 1

[Владимир Проскурин]

Это не совсем таблица. Можно сделать так: каждую колонку на мобилках друг под дружкой. Колонку с заголовками встроить в каждую колонку с значениями. т.е. выйдет примерно
Название
Значение
------------
Название
Значение
-----------

и так для каждой колонки.

Можно все это дело сделать слайдером, а также можно чтобы в слайдере двигались только значения полей, а заголовки были фиксированными.

Answer 2

[L0k1]

все давно придумано - гугл в руки и выбираешь себе подходящий вариант
trydevkit.com/blog-post/responsive-tables-best-pra...