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.

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

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

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

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

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

Похожие

Комментарии