Comments 21
UFO just landed and posted this here
UFO just landed and posted this here
Первый вариант очень неудобен. Таблица ж не зря имеет такую форму. Третий вообще непонятно что, данные куда-то пропали (из двух измерений осталось одно).
2 ничего. 4 — не совсем способ, конечно, но полагаю, если по высоте на экран влезет, то тоже имеет право на жизнь. 2 и 4 вообще полезно было бы совместить.
2 ничего. 4 — не совсем способ, конечно, но полагаю, если по высоте на экран влезет, то тоже имеет право на жизнь. 2 и 4 вообще полезно было бы совместить.
Каждый вариант имеет право на жизнь в определённых случаях. И каждый способ может быть удобным в своём отельном идеальном случае. На каждый случай нужно подбирать специфичный способ, один из представленных в этом посте, какой либо другой или смешанные. Для реализации таблиц в адаптивных интерфейсах нет какого то универсального способа.
Мне кажется одного способа точно не хватает: он напоминает 1-ый вариант, но при этом убираются заголовки некоторых столбцов — это возможно в определённых случаях когда интуитивно понятно назначение определённых значений таблицы.
Мне кажется одного способа точно не хватает: он напоминает 1-ый вариант, но при этом убираются заголовки некоторых столбцов — это возможно в определённых случаях когда интуитивно понятно назначение определённых значений таблицы.
Второй вариант возьму на вооружение.
смотрел все эти варианты, когда делал адаптивную таблицу в своем проекте, но в итоге решил просто прятать определенные столбцы для планшетного экрана и для телефона
но у меня было все проще — таблицей был сделан список форумов, и я посчитал, что для пользователя мобильного устройства абсолютно не важно количество тем и ответов в них — остался только заголовок и короткое последнее сообщение
но у меня было все проще — таблицей был сделан список форумов, и я посчитал, что для пользователя мобильного устройства абсолютно не важно количество тем и ответов в них — остался только заголовок и короткое последнее сообщение
Второй вариант крут, если данные не нужно сравнивать друг с другом.
Третий вариант тут лучше, но вот если величины отличаются на несколько порядков — получится каша
Третий вариант тут лучше, но вот если величины отличаются на несколько порядков — получится каша
Porn name в первом способе порадовал )
Отображать часть таблицы, по тапу выдавать полные данные как в первом варианте.
Я бы предложил ещё вариант:
на маленьком экране свернуть таблицу в трубу, предоставив возможность скроллить по горизонтали на манер барабана, со спрямлением фронтальной части, ну а по вертикали скроллить как обычно
на маленьком экране свернуть таблицу в трубу, предоставив возможность скроллить по горизонтали на манер барабана, со спрямлением фронтальной части, ну а по вертикали скроллить как обычно
Есть еще такое решение, похоже на второй вариант dbushell.com/2012/01/05/responsive-tables-2/
1-й самый практичный на мой взгляд. Я тсолкнулся один раз, мне подсказал американский коллега, что лучше разбить таблицу. Так и сделали. Остальные варианты… нужно пробовать!
UFO just landed and posted this here
Ещё идея: как в первом скриншоте (неадаптивные вариант №2 с мелкой таблицей),
только таблицу перворачивать по ширине мобилы и при наведении на ячейку — увеличивать размеры данных в ячейке (как под лупой). Причём сделать так, чтобы при клике ячейка увеличивалась в новом слое выше, а при повторном — уменьшалась.
Ещё идея с барабаном понравилась. Оставлять на месте только заголовки таблицы, а само поле данных таблицы делать перемещаемым, как при вращении барабана.
только таблицу перворачивать по ширине мобилы и при наведении на ячейку — увеличивать размеры данных в ячейке (как под лупой). Причём сделать так, чтобы при клике ячейка увеличивалась в новом слое выше, а при повторном — уменьшалась.
Ещё идея с барабаном понравилась. Оставлять на месте только заголовки таблицы, а само поле данных таблицы делать перемещаемым, как при вращении барабана.
Only those users with full accounts are able to leave comments. Log in, please.
Таблицы с данными в адаптивном дизайне