Таблицы адаптивных данных: полный список решений

1. Основная разметка для нашего стола
2. Чистые CSS-решения
3. Выбор правильного метода
4. Заключение

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

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

Основная разметка для нашего стола

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

<table summary = "Таблица примеров"> <caption> Заголовок таблицы примеров </ caption> <thead> <tr> <th> Страна </ th> <th> Языки </ th> <th> Население </ th> < th> Средний возраст </ th> <th> Площадь (км2) </ th> </ tr> </ thead> <tbody> <tr> <td> Аргентина </ td> <td> ... </ td > <td> ... </ td> <td> ... </ td> <td> ... </ td> </ tr> <! - здесь больше строк ... -> </ tbody> <tfoot> <tr> <td colspan = "5"> <! - содержание здесь ... -> </ td> </ tr> </ tfoot> </ table>

Обратите внимание, что за исключением примера Foundation, стиль этой таблицы будет основан на Стили таблиц Bootstrap ,

Давайте теперь познакомимся с различными методами построения адаптивных таблиц.

Чтобы создать адаптивную таблицу с начальная загрузка Вы должны обернуть таблицу внутри элемента div с классом реагирования на таблицы. По умолчанию Bootstrap применяет свойство overflow-x: auto к этому элементу оболочки. Когда размер окна браузера меньше 768 пикселей, применяется свойство overflow-y: hidden. Поэтому на небольших устройствах вы можете видеть содержимое ваших таблиц, прокручивая их по горизонтали.

Следующий снимок экрана демонстрирует то, что описано выше:

Посмотреть демонстрацию CodePen с помощью Bootstrap

Фонд предоставляет интересный способ создания адаптивных таблиц. Как вы можете видеть на следующем снимке экрана, на небольших устройствах (<767px) первый столбец (т. Е. Страна) закреплен слева от таблицы, а остальные - с горизонтальной прокруткой:

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

Посмотреть демонстрацию CodePen с помощью Foundation

Stacktable.js - это плагин jQuery, который меняет расположение ваших таблиц на маленьких экранах. В зависимости от области просмотра браузера, он переключается между двумя таблицами, исходной таблицей и ее копией. Последняя представляет собой таблицу ключ / значение, где ключ - это имя столбца, а значение - значение, связанное со строкой. Как показано на следующем снимке экрана, это происходит для всех столбцов, кроме первого:

Для плагина stacktable.js требуется jQuery, файл JavaScript и простой файл CSS. После того, как вы добавите эти файлы в свой проект, просто вызовите плагин на желаемой таблице. По умолчанию исходная таблица скрыта, когда ширина области просмотра меньше или равна 800 пикселей. Но, если вы хотите, вы можете легко настроить это.

Просмотрите демонстрацию CodePen, используя stacktable.js

Tablesaw - это набор плагинов jQuery для адаптивных таблиц, созданных Филамент Групп , Давайте подробнее рассмотрим некоторые из этих плагинов.

Подобно, но не путать с плагином Stacktable.js, описанным выше, Tablesaw предлагает свою собственную реализацию для создания таблиц ключ / значение через плагин, называемый Stack Table. Вот как это выглядит:

Чтобы использовать этот плагин, вы должны получить копию необходимых файлов JavaScript и CSS и включить их в свой проект. Затем добавьте классы tableaw и tablesaw-stack, а также атрибут data-tablesaw-mode = "stack" в нужные таблицы. Когда ширина области просмотра меньше 640 пикселей, ваши таблицы будут оптимизированы для адаптивных макетов.

Посмотреть демонстрацию CodePen с помощью Tablesaw

Но плагины Tablesaw могут сделать больше! Во-первых, Переключить плагин помогает выбрать столбцы, которые вы хотите видеть в разных размерах. Плагин Mini Map дает пользователям четкое представление о видимых и скрытых столбцах.

Опять же, вы должны загрузить необходимые файлы (например, tablesaw.bare.css). В качестве следующего шага выберите точки останова, в которых будут отображаться ваши столбцы. Для этого добавьте атрибут data-tablesaw-priority к заголовкам таблицы, указав в качестве значения нужный номер или ключевое слово. Вот пример:

Наконец, вызовите функциональность плагинов, установив соответствующие классы и атрибуты для ваших таблиц:

<table data-tablesaw-mode = "columntoggle" data-tablesaw-minimap> <! - content -> </ table>

Просмотрите демонстрацию CodePen с помощью Tablesaw с Toggle и Mini Map

RWD-Table-Patterns - альтернативная реализация подхода Tablesaw (см. Предыдущий раздел). Кроме того, он предназначен для использования с Bootstrap, но вы можете свободно настраивать его для разных сред.

Прежде чем пытаться использовать плагин, убедитесь, что вы успешно добавили все необходимые зависимости в свои проекты. Вы можете инициализировать его, настроив структуру Bootstrap (см. Раздел Bootstrap выше), а затем присвоив атрибуту data-pattern = "priority-columns" элементу оболочки. Также есть возможность указать точки останова, в которых ваши таблицы будут видны. Для этого добавьте атрибут data-priority в заголовки таблицы с желаемым значением. Вот как работает плагин:

Кроме того, по умолчанию заголовки таблицы являются фиксированными. Сократите область просмотра, чтобы проверить это!

Просмотр демонстрации CodePen с использованием RWD-Table-Patterns

FooTable - еще одно отличное решение для эффективного масштабирования таблиц на экранах разных размеров. Опционально предоставляет полезные дополнения, такие как фильтрация, сортировка и разбиение на страницы. Помимо его версии JQuery, есть также версия плагина WordPress ,

Как всегда, перед использованием FooTable, вам необходимо скачать необходимые файлы. Вы можете сделать это, посетив Footable GitHub хранилище ,

Чтобы это работало, сначала назначьте класс footable нужной таблице, а затем инициализируйте плагин с помощью JavaScript. У вас есть возможность настроить точки останова, в которых ваши столбцы будут скрыты. Это может быть достигнуто путем добавления атрибута data-hide к соответствующим заголовкам таблицы со значениями по умолчанию (например, телефон, планшет) или пользовательскими ключевыми словами. Скриншот ниже дает вам представление о том, как это работает.

Также обратите внимание, что точки останова основаны на ширине таблицы. Если вы хотите использовать ширину области просмотра, вы должны изменить объект конфигурации ,

Посмотреть демонстрацию CodePen с помощью FooTable

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

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

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

Просмотр демонстрации CodePen с использованием DataTables

Чистые CSS-решения

Как вы, наверное, заметили, все решения (кроме подхода Bootstrap), представленные выше, основаны на JavaScript или jQuery. Тем не менее, есть также множество интересных простых подходов CSS. Список ниже суммирует некоторые из самых популярных:

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

Выбор правильного метода

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

• Тип ваших данных и их размер / длина. Скажем, например, что у вас есть таблицы со многими столбцами. В этом случае вы можете избежать горизонтальной прокрутки.
• Вам нужно простое или более сложное решение? Вас интересуют такие функции, как фильтрация и / или сортировка?
• Ваши данные поступают из внешнего источника данных (например, веб-службы)?

Заключение

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

Наконец, мы создали Коллекция CodePen со всеми демонстрациями из этой статьи, так что вы можете проверить это, если хотите.

Похожие

Комментарии