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

Question

[Dolosweb]

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

Наверное справедливости ради стоит отметить что размер экрана телефона в разы меньше, даже минимально допустимое масштабирование не выручит. Таким образом любой метод чревато дополнительным ущербом к юзабельности.

Comments

[ThunderCat]

Ну неужели так прям никак? Скролл, хайдить столбики... в любом случае нельзя нормально впихнуть невпихуемое...

[ThunderCat]

еще иногда что-то можно заменить иконками вместо длинных слов/фраз, можно и легенду снизу/сверху прикрепить...

Answer 1

[Andrey K.]

Есть решение с использованием data-атрибутов и перестроением в блочный вид на CSS.

https://codepen.io/just_freelance/pen/RwPvWmj

Comments

[Вова Дружаев]

Аналогично решали подобную задачу. Самый удобный способ. Хотя в исходном коде немного избыточный. Но делается подобное автоматом на php классе и поэтому даже не задумываемся теперь как оно работает. Всё замечательно работает))

Answer 2

[Вадим Иванов]

Конечно скролл. Это самое очевидное и удобное решение.

Answer 3

[Yaroslav TheRock]

Самый простой способ

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Answer 4

[Илья]

По-моему универсально для таблицы из двух столбцов и для таблицы из 10 столбцов это никак не сделать, ну кроме как горизонтально го скролла, как писали. К каждой таблице нужен свой подход. Ну или искать какой-то плагин или самому писать, который будет таблицы в блоки превращать в зависимости от тесноты контента в таблице.

Answer 5

[lagudal]

как уже писали выше, одной пилюли на все случаи жизни нет и не будет. Есть сложные таблицы с большим кол-вом строк столбцов и содержимым, в которых в нормальном разрешении то бывает тяжело разобраться, не то что в телефоне. Подходов на самом деле не много, это скролл, дата-атрибуты, или же уход от табличной верстки, например, в сторону флексов, где можно легко менять ориентированность и порядок столбцов или строк.
Ну вот еще пару статей, может пригодится.
https://css-tricks.com/accessible-simple-responsiv...
https://css-tricks.com/responsive-data-tables/