Виджет таблицы с перестроением

Режим перестроения таблицы работает, сворачивая столбцы таблицы в структуру, которая выглядит как блоки пар «метка/данные» для каждой строки. Поскольку порядок элементов HTML таблицы запрещает стилизовать таблицу таким образом, плагин динамически добавляет разметку для отображения (без влияния на доступность). Ниже представлена демонстрация базовой таблицы с режимом перестроения:

Применение режима перестроения к таблице

Режим адаптивной таблицы с перестроением является самым простым в плане требований к разметке, так как он требует только таблицы с атрибутом data-role="table" на элементе таблицы. Нет необходимости устанавливать атрибут data-mode, так как reflow является значением по умолчанию.

<table data-role="table" id="my-table">

Как работает режим перестроения

Плагин анализирует значения (или abbr title) первой строки заголовков (th) таблицы, которые он находит. Например, в таблице выше анализируется третий заголовок таблицы для получения содержимого («Год»):

<th>Year</th>

Затем скрипт добавляет элемент с текстом заголовка таблицы *перед* содержимым каждой ячейки в этом столбце. Например, для каждой ячейки столбца «Год»:

<td>1941</td>

Перед текстом каждой ячейки добавляется элемент с классом class ui-table-cell-label.

<td><b class="ui-table-cell-label">Year</b>1941</td>

В нашем подходе, ориентированном на мобильные устройства, базовые стили для таблицы с перестроением выстраивают каждую строку и представляют каждую ячейку в формате «метка/данные». Это делается путем скрытия строк заголовков таблицы, присвоения каждой ячейке таблицы атрибута display:block, чтобы они выстраивались друг под другом. Добавляемый в каждую ячейку элемент метки стилизуется как display:inline-block с правилом min-width:30%, чтобы поместить метки на одной строке с содержимым, придерживаясь одинаковой ширины, чтобы сформировать представление из двух столбцов.

Важно отметить, что необходимо обернуть заголовки таблицы в <thead> ... </thead> блок, а тело таблицы в <tbody> ... </tbody> блок, как показано в примере полного примера.

Делаем таблицу адаптивной

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

Это делается путём обертывания нескольких простых правил CSS в медиа-запрос, который применяется только при ширине больше определённой точки отсечения. Стиль делает строки заголовков таблицы видимыми, отображает ячейки в табличном формате и скрывает сгенерированные элементы меток внутри каждой ячейки. Ниже приведён пример медиа-запроса, который переключает представление при ширине 40em (640 пикселей):

@media ( min-width: 40em ) {
  /* Show the table header rows and set all cells to display: table-cell */
  .my-custom-breakpoint td,
  .my-custom-breakpoint th,
  .my-custom-breakpoint tbody th,
  .my-custom-breakpoint tbody td,
  .my-custom-breakpoint thead td,
  .my-custom-breakpoint thead th {
    display: table-cell;
    margin: 0;
  }
  /* Hide the labels in each cell */
  .my-custom-breakpoint td .ui-table-cell-label,
  .my-custom-breakpoint th .ui-table-cell-label {
    display: none;
  }
}

Лучше всего использовать class на таблице для применения точки отсечения. Добавьте эти правила в свой пользовательский стилистический лист, который включён в head страницы. Рекомендуется создать набор пользовательских классов для точек отсечения, которые могут быть использованы для применения стандартных точек отсечения для таблиц в вашем проекте.

В приведённом выше примере предполагается, что к таблице добавлено класс my-custom-breakpoint для применения точки отсечения. Каждое из правил в пользовательском медиа-запросе ограничено классом этой таблицы, чтобы нацелиться только на таблицы с классом my-custom-breakpoint.

Для работы этой техники браузер должен поддерживать медиа-запросы и возможность стилизовать ячейки таблицы как блочные элементы. При тестировании большинство популярных браузеров для настольных и мобильных устройств отвечают этим критериям, но старые версии Internet Explorer (8 и более ранние) отходят от нормального представления таблицы. IE 9 может поддерживать эту технику, но для этого потребуются несколько дополнительных стилей, поэтому рекомендуется применять их в max-width медиа-запросе, чтобы применять их только при отображении таблицы, так как их трудно отменить.

Выбор точки отсечения

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

Ширина точки отсечения сильно зависит от количества столбцов в таблице и содержимого каждой ячейки. На некоторых сайтах она может быть настолько низкой, как 30em (480px), а на других — такой широкой, как 100em (1600px). В рамках фреймворка нет возможности выбрать «стандартную точку отсечения», которая будет работать для всех — вот почему в таблицу по умолчанию не встроена точка отсечения.

Рекомендуется, чтобы ширины медиа-запросов указывались в em для адаптивности к изменениям размера шрифта. Чтобы преобразовать ширину в пикселях в em, разделите целевую ширину на 16 (пикселей). Используйте это значение в качестве значения min-width в медиа-запросе выше.

Применение заданной точки отсечения

Хотя мы настоятельно рекомендуем писать свои пользовательские точки отсечения, в фреймворке предусмотрена одна предварительно настроенная точка отсечения, которая направляет стиль в стопку для небольших телефонов и переключается на табличное представление на больших телефонах, планшетах и настольных компьютерах. Чтобы использовать эту предварительно настроенную точку отсечения, добавьте класс ui-responsive к таблице, чтобы переключиться из стопки на табличное представление при 560px (35em). Если эта точка отсечения не работает для вашего содержимого, мы рекомендуем создать пользовательскую точку отсечения, как описано выше.

<table data-role="table" class="ui-responsive">

Работа с групповыми заголовками столбцов

Довольно часто нужно логически сгруппировать несколько столбцов вместе под заголовком группы для финансовых или научных данных. Фреймворк может поддерживать самую простую версию этого, позволяя использовать две строки заголовков таблицы (TH), где первая строка содержит простые атрибуты colspan для группировки столбцов ниже. В этой конфигурации фреймворк добавит класс к метке первой ячейки в каждой группе, чтобы вы могли стилизовать их по-разному и обеспечить дополнительную визуальную иерархию.