Cheizer
@Cheizer

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

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

5d59bc35cf679575764864.png

Для мобильной версии из нее нужно сделать таблицу вот такого вида

5d59bc53670e2714713500.png

Как бы вы сверстали это? Какой подход можно использовать? Куда копать?

Есть у меня два варианта, сделать не таблицей а на дивах, flexbox в три колонки. Но тут проблема есть, высота строк в этих трех колонках не будет одинаковой (например текст будет в две строки где то). Облом.

Еще вариант, с JS, тупо добавить классы в нужные места, и спарсить всю таблицу, и на мобильной версии тупо через INNERHTML на JS слепить мобильные блоки. А саму таблицу скрыть.

Вот поднял просто таблицу https://codepen.io/Cheizer/pen/qBWNNzm

Как быть? Какой метод использовать что бы на мобиле сделать в столбик? Куда копать???
  • Вопрос задан
  • 168 просмотров
Пригласить эксперта
Ответы на вопрос 2
@cema93
WordPress разработчик
Попробуйте посмотреть stacktable.js
Ответ написан
@lexchz
Если не дублировать контент - без JS никак, к сожалению.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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