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

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


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

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


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



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

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


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



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

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


    Демо



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

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


    Демо



    В этом способе таблица на маленьком экране просто прячется под «спойлер». Как говорится, дешево и сердито.
    Метки:
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

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

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

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

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.