Создаем адаптивную сводную таблицу

Создаем адаптивную сводную таблицу

От автора: не так давно твит Smashing Magazine привлек внимание к моей статье по созданию элегантной таблицы с помощью OpenType. Спасибо, Smashing Magazine. Один комментатор справедливо заметил, что таблица была неадаптивной: при сужении окна браузера данные отсекались. Я не мог изменить таблицу, как в предыдущих примерах: порядок и направление данных в ней важны и не должны обрезаться. Однако есть другое решение.

В Microsoft Excel и других табличных приложениях есть функция под названием «сводные таблицы», которая меняет строки и столбцы местами. Подобный эффект можно реализовать на веб-страницах с помощью JavaScript для таблиц определенного вида. Например, для таблицы сверху.

Начинаем с разметки

Разметка таблицы похожа на таблицу из примера с OpenType, только здесь добавляются id и класс (необязательные закрывающие теги были удалены для упрощения кода).

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

CSS тоже очень похож. Я написал этот пример на Sass:

Поворот строк и столбцов

Текущая структура таблицы записана в JS в переменную fulltable. Без JS таблица будет отображаться, но не будет поворачиваться.

Во всех переменных хранится часть таблицы.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Функция pivotTable меняет строки и колонки местами. Ячейки заголовков, которые были слева, перемещаются наверх. Чисто семантически (и с точки зрения перспективы) ничего не меняется, меняется только вид.

После переворота таблицы класс меняется с large на small. Перевернутая версия структуры таблицы записывается в переменную slimTable, чтобы таблица еще раз не перевернулась при изменении размера вьюпорта.

Функция pivotTable запускается после загрузки страницы:

Нам не нужно проверять вызов функции pivotTable каждый раз при изменении размера вьюпорта (это сильно ударит по производительности), поэтому я принудительно понизил время повторного запуска до 200 миллисекунд при срабатывании события resize:

Замедление делается через функцию:

Заключение

Техника не подходит для всех таблиц (в которых слишком много столбцов и строк), но может пригодиться для таблиц, как в нашем примере.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Научись верстать сайты, используя все возможности фреймворка Bootstrap.

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree