Как вы решили проблему адаптивности таблиц?

Есть проблема с отображением таблиц в мобильной версии. Столбцов больше 5. Предлагайте только юзабельные варианты.

Наверное справедливости ради стоит отметить что размер экрана телефона в разы меньше, даже минимально допустимое масштабирование не выручит. Таким образом любой метод чревато дополнительным ущербом к юзабельности.
  • Вопрос задан
  • 674 просмотра
Пригласить эксперта
Ответы на вопрос 5
@JustFreelance
front-end developer
Есть решение с использованием data-атрибутов и перестроением в блочный вид на CSS.

https://codepen.io/just_freelance/pen/RwPvWmj
Ответ написан
DyNaMiTek
@DyNaMiTek
Frontend developer
Конечно скролл. Это самое очевидное и удобное решение.
Ответ написан
Комментировать
kickflip2009
@kickflip2009
Самый простой способ

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>
Ответ написан
Комментировать
@ravewave
По-моему универсально для таблицы из двух столбцов и для таблицы из 10 столбцов это никак не сделать, ну кроме как горизонтально го скролла, как писали. К каждой таблице нужен свой подход. Ну или искать какой-то плагин или самому писать, который будет таблицы в блоки превращать в зависимости от тесноты контента в таблице.
Ответ написан
Комментировать
@lagudal
как уже писали выше, одной пилюли на все случаи жизни нет и не будет. Есть сложные таблицы с большим кол-вом строк столбцов и содержимым, в которых в нормальном разрешении то бывает тяжело разобраться, не то что в телефоне. Подходов на самом деле не много, это скролл, дата-атрибуты, или же уход от табличной верстки, например, в сторону флексов, где можно легко менять ориентированность и порядок столбцов или строк.
Ну вот еще пару статей, может пригодится.
https://css-tricks.com/accessible-simple-responsiv...
https://css-tricks.com/responsive-data-tables/
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
02 нояб. 2024, в 23:04
80000 руб./за проект
02 нояб. 2024, в 21:08
2000000 руб./за проект