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

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

https://codepen.io/just_freelance/pen/RwPvWmj
Ответ написан
DyNaMiTek
@DyNaMiTek
Frontend developer
Конечно скролл. Это самое очевидное и удобное решение.
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Например как-то так:



А вообще ещё ведь можно сделать горизонтальный скролл, или таблицу в слайдере, аккордеоном, гридами, флексами, с помощью javascript и т.д и т.п... самое главное, наверное желание решить задачу, а не задаваться наивным вопросом: "А как? Как??? Ведь адаптивно не выйдет... Как?".
Ответ написан
kickflip2009
@kickflip2009
Самый простой способ

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

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

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