среда, 9 декабря 2015 г.

Таблицы с данными в адаптивном дизайне

06:40 By , No comments

Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:



Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.

1. Способ от Chris Coyier


Описание и демо на русском, оригинал и демо на английском.



Суть в том, что таблица вытягивается вертикально, в каждой строке остается только два столбца: заголовок и данные. Минус такого способа в том, что в результате получается слишком длинная таблица, и ее придется долго прокручивать.

2. Способ от Zurb.com


Подробности и демо на английском



Хороший способ на Javascript/CSS, который добавляет горизонтальную прокрутку для ячеек с данными, при этом заголовки остаются на месте, очень удобно.

3. Способ от Scott Jehl


Демо



Преобразует обычную таблицу в красивую диаграмму. Такой способ подойдет не для всех данных, но выглядит результат очень интересно.

4. Способ от Todd Parker


Демо



В этом способе таблица на маленьком экране просто прячется под «спойлер». Как говорится, дешево и сердито.
  •  
    +58
     
    •  
  • 25,9k
    •  
  •  477
      •  
      •  
      •  
 
Кирилл @grokru 
карма401,0
 
рейтинг0,0
Реклама

Похожие публикации

AdRiver
Реклама

Самое читаемое

Вопросы по теме
AdRiver
Реклама

Комментарии (21)

НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
 AnGr    
+12
  
Ссылочку, будьте добры.
 Kastrulya    
+3
  
В Симпсонах небось?
 esc  
+1
  
Первый вариант очень неудобен. Таблица ж не зря имеет такую форму. Третий вообще непонятно что, данные куда-то пропали (из двух измерений осталось одно).

2 ничего. 4 — не совсем способ, конечно, но полагаю, если по высоте на экран влезет, то тоже имеет право на жизнь. 2 и 4 вообще полезно было бы совместить.
 merkuriy    
0
  
Каждый вариант имеет право на жизнь в определённых случаях. И каждый способ может быть удобным в своём отельном идеальном случае. На каждый случай нужно подбирать специфичный способ, один из представленных в этом посте, какой либо другой или смешанные. Для реализации таблиц в адаптивных интерфейсах нет какого то универсального способа.

Мне кажется одного способа точно не хватает: он напоминает 1-ый вариант, но при этом убираются заголовки некоторых столбцов — это возможно в определённых случаях когда интуитивно понятно назначение определённых значений таблицы.
 esc    
0
  
Таблица есть таблица, она должна быть двухмерной, чтобы можно было быстро выделить глазом как строку, так и слолбик. Решения, которые эту логику ломают, имхо, не годятся для реального применения. Красиво, но бесплолезно.
 esc    
0
  
Кстати, второй вариант можно заставить выглядеть как первый, только скролл сделать оризонтальным и дискретным (чтобы пролистывалось не произвольное число пикселей а одна-две или 3 столбика, в зависимости от силы скролла.
 eghik  
0
  
Второй вариант возьму на вооружение.
 arwyl  
+1
  
смотрел все эти варианты, когда делал адаптивную таблицу в своем проекте, но в итоге решил просто прятать определенные столбцы для планшетного экрана и для телефона
но у меня было все проще — таблицей был сделан список форумов, и я посчитал, что для пользователя мобильного устройства абсолютно не важно количество тем и ответов в них — остался только заголовок и короткое последнее сообщение
 ftdgoodluck  
0
  
Второй вариант крут, если данные не нужно сравнивать друг с другом.
Третий вариант тут лучше, но вот если величины отличаются на несколько порядков — получится каша
 Kovaldo  
+1
  
Porn name в первом способе порадовал )
 equand  
0
  
Отображать часть таблицы, по тапу выдавать полные данные как в первом варианте.
 RNZ  
0
  
Я бы предложил ещё вариант:
на маленьком экране свернуть таблицу в трубу, предоставив возможность скроллить по горизонтали на манер барабана, со спрямлением фронтальной части, ну а по вертикали скроллить как обычно
 grokru    
0
  
Второй вариант именно это и делает.
 RNZ    
0
  
А, ну да, просто в примере первый столбец зафиксирован…
 RNZ    
0
  
Это кстати мешает, например если значения ячеек в первом столбце не помещаются на дисплей…
 LostSenSS  
+3
  
Есть еще такое решение, похоже на второй вариантdbushell.com/2012/01/05/responsive-tables-2/
 macgera  
0
  
1-й самый практичный на мой взгляд. Я тсолкнулся один раз, мне подсказал американский коллега, что лучше разбить таблицу. Так и сделали. Остальные варианты… нужно пробовать!
НЛО прилетело и опубликовало эту надпись здесь
 paurock  
0
  
Ещё идея: как в первом скриншоте (неадаптивные вариант №2 с мелкой таблицей),
только таблицу перворачивать по ширине мобилы и при наведении на ячейку — увеличивать размеры данных в ячейке (как под лупой). Причём сделать так, чтобы при клике ячейка увеличивалась в новом слое выше, а при повторном — уменьшалась.
Ещё идея с барабаном понравилась. Оставлять на месте только заголовки таблицы, а само поле данных таблицы делать перемещаемым, как при вращении барабан

0 коммент.:

Отправить комментарий