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

  1. Примеры таблиц по умолчанию
  2. Вопросы для рассмотрения
  3. Различные решения
  4. Опция PDF
  5. Плюсы:
  6. Плюсы:
  7. Плюсы:
  8. Выборочно отображаемая опция данных
  9. Плюсы:
  10. Вариант горизонтальной прокрутки 2
  11. Плюсы:
  12. CSS-адаптивная таблица
  13. Так какой тип адаптивной таблицы выбрать?
  14. Май 2016 Обновление

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

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

Примеры таблиц по умолчанию

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

Вопросы для рассмотрения

  • Сколько данных содержит ваша таблица

  • На какой платформе будут создаваться таблицы (например, CMS, статический HTML-сайт)

  • Как будут создаваться таблицы (например, конструктор таблиц CMS, кодированный вручную)

  • Кто будет создавать таблицы (есть ли у пользователя технические навыки или нет)

  • Имеет ли пользователь доступ или возможность писать CSS или JavaScript

Различные решения

Вот несколько примеров, демонстрирующих разные подходы, вписывающие таблицу в адаптивный макет. Эти методы изменяют отображение таблицы, используя комбинацию CSS и JavaScript.

Опция PDF

Вы можете сохранить документ Excel в формате PDF, а затем загрузить его на свой сайт. При просмотре веб-сайта на большом экране таблица будет видна. Когда сайт просматривается на мобильном устройстве, таблица будет отображаться скрытой, а вместо этого будет отображаться ссылка на PDF-документ. При нажатии на ссылку пользователь будет перенаправлен на страницу, где он сможет просмотреть файл PDF. Это изменение может произойти с помощью простого медиа-запроса CSS, чтобы скрыть исходную таблицу и отобразить ссылку PDF.

Плюсы:

  • Легко наносится на сайт
  • Добавлен бонус для скачивания файла
  • Нужен только простой медиа-запрос CSS, чтобы скрыть исходную таблицу и отобразить ссылку PDF

Минусы:

  • Уводит пользователя со страницы
  • Возможно, ссылка не будет нажата

Контейнер горизонтальной прокрутки

Вы можете разрешить пользователю горизонтальную прокрутку таблицы, поместив ее в контейнер с переполнением: auto; и переполнение-у: скрыто; , Как только ширина страницы станет меньше таблицы, контейнер замаскирует таблицу, чтобы она не выходила за пределы ширины страницы. Затем пользователь может прокручивать пальцем влево и вправо, чтобы просмотреть содержимое таблицы. Это может быть легко применено, используя простой медиа-запрос CSS.

Плюсы:

  • Легко наносится с помощью CSS
  • Держит пользователя на странице
  • Не влияет на ширину страницы

Минусы:

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

Опция круговой диаграммы

Эта опция берет данные таблицы и преобразует их в круговую диаграмму. Это умный подход, но довольно ограниченный для отображения больших табличных данных в удобной для пользователя форме.

Плюсы:

  • Сжатие данных для размещения на странице

Минусы:

  • Содержание таблицы сложно перевести
  • Ограничено тем, сколько контента можно просматривать
  • Стол становится круговой диаграммой

Ссылка на сайт: http://tinyurl.com/7qtzet9

Выборочно отображаемая опция данных

Эта опция позволяет пользователю выбрать, какие данные для просмотра в таблице через выпадающее меню. Хотя это хорошее решение, я чувствую, что пользовательский интерфейс ограничен на мобильном устройстве. Это не решает проблему просмотра всех данных одновременно.

Плюсы:

  • Сжатие стола для размещения внутри маленьких экранов
  • Позволяет пользователю выбирать то, что он хочет просмотреть

Минусы:

  • Не помещается на экране при просмотре всех данных
  • Это может быть раздражает выбор ящиков для просмотра содержимого

Ссылки: http://tinyurl.com/lvkknne (Демо)

http://tinyurl.com/7v7r3uf (Источник)

Вариант горизонтальной прокрутки 2

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

Плюсы:

  • Подходит для большого стола
  • Позволяет пользователю панорамировать отдельные столбцы

Минусы:

  • Использует JavaScript Polyfill, чтобы активировать изменение на заданной ширине
  • Требует от пользователя горизонтальной прокрутки

Ссылка на сайт: http://tinyurl.com/m53zva7

CSS-адаптивная таблица

Этот вариант кажется лучшим вариантом, который можно легко применить на разных платформах. Он использует медиазапросы CSS для переформатирования таблицы в удобное для мобильных устройств представление. Все данные остаются читаемыми, что исключает необходимость горизонтальной прокрутки. См. Комментарий Криса Койера, расположенный по ссылке ниже, он объясняет, как все данные могут храниться в HTML.

Так какой тип адаптивной таблицы выбрать?

Решение, какой подход принять все зависит от ваших конкретных потребностей проекта. Нет правильного или неправильного решения. Это на самом деле зависит от того, как вы хотите, чтобы результат был похож. Лично я нахожу последний пример наиболее подходящим для моих нужд, но вы можете этого не найти. Все зависит от того, чего вы пытаетесь достичь. См. Контрольный список ниже, чтобы помочь решить, какое решение таблицы использовать.

Тип таблицы CSS Java Script Подходит для большого содержимого таблицы. Рейтинг удобства использования из 10 Параметр PDF Да Нет Да 4 Параметр горизонтальной прокрутки Да Нет Да 7 Параметр круговой диаграммы Да Да Нет 2 Выборочно отображаемый параметр данных Да Да Нет 4 Параметр горизонтальной прокрутки 2 Да Да Да 7 CSS-адаптивная таблица Да Нет Да 9

Май 2016 Обновление

Теперь, когда свойство flex-box хорошо поддерживается, есть несколько методов, которые используют это. Однако, насколько нам известно, все эти методы требуют, чтобы вы изменили разметку, чтобы она не использовала элемент таблицы. Вкратце, мы не включили подробное описание этих методов, но вы можете узнать больше о гибкие коробки адаптивных таблиц Вот. Пожалуйста, дайте нам знать в комментариях, если вы считаете, что мы должны включить их.

Здесь есть большая коллекция примеры на codepen и отличный запас таблицы в целом прошли на CSS трюки ,

Так какой тип адаптивной таблицы выбрать?

Авторизация

Реклама

Реклама

Архив сайта

    Как путешествовать и зарабатывать деньги
    Согласились бы вы путешествовать в свое удовольствие по разным городам и странам и при этом зарабатывать? Наверняка многие ответят утвердительно. Если вы хотите начать зарабатывать, путешествуя, велкам!

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

    10 Доступных способов путешествовать по миру бесплатно
    10 Доступных способов путешествовать по миру бесплатно Путешествия! Как много в этом слове! Путешествия — это мечта! И все это действительно так. Хотя наверняка сейчас найдется немало скептиков, которые

    10 способов путешествовать по миру бесплатно
    Пуууутешествия! Как много в этом слове! Радость новых впечатлений, яркость неизведанных эмоций и огромный восторг, который даже взрослых и серьезных людей способен превратить в искренних, радующихся свободе

    По миру без виз
    В мае завершился очередной сумасшедший проект профессионального путешественника и писателя Валерия Шанина: кругосветное путешествие, в ходе которого туристам ни разу не пришлось заходить в иностранные

    Можно ли беременным путешествовать?
    Вот оно, свершилось! Новость о скором пополнении в семье не только радует, но и порой заставляет кардинально поменять все планы на жизнь. И это понятно – будущая мамочка очень переживает о своем драгоценном

    Как позволить себе путешествовать по миру: советы
    Знаете ли вы, что вам не нужно иметь много денег или высокооплачиваемую работу, чтобы путешествовать. Некоторые люди не решаются отправиться в путешествие и лишают себя, возможно, самых эпических приключений

    5 сомнительных способов перемещаться во времени
    Эммет Браун утверждал, что достаточно разогнаться на "Делориане" , чтобы попасть и в прошлое, и в будущее. Хотя многие имеют дерзость не согласиться со светочем и предлагают свои теории. Впрочем, они

    Как путешествовать и зарабатывать деньги, или Творческий бизнес в дороге
    Наверняка многие ответят утвердительно. Но вот незадача: нет ни средств, ни возможности, ни даже идеи, как это можно воплотить в жизнь. Но отчаиваться рано: с последним пунктом поможет разобраться Дарья

    Как путешествовать - Валерий Шанин, скачать книгу бесплатно
    Э та книга для всех, кто уже собирается в заграничный вояж или еще только мечтает о поездках за границу. В ней рассказывается о препятствиях, стоящих на пути самостоятельного путешественника, и о способах


Облако тегов