Починаємо з розмітки
Розмітка таблиці схожа на таблицю з прикладу з OpenType, тільки тут додаються id і клас (необов'язкові закривають теги були видалені для спрощення коду).
CSS теж дуже схожий. Я написав цей приклад на Sass:
Поворот рядків і стовпців
Поточна структура таблиці записана в JS в змінну fulltable. Без JS таблиця буде відображатися, але не буде повертатися.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
У всіх змінних зберігається частина таблиці.
Функція pivotTable змінює рядки і колонки місцями. Осередки заголовків, які були зліва, переміщаються нагору. Чисто семантично (і з точки зору перспективи) нічого не змінюється, змінюється тільки вид.
Після перевороту таблиці клас змінюється з large на small. Перевернута версія структури таблиці записується в змінну slimTable, щоб таблиця ще раз не перекинулася при зміні розміру вьюпорті.
Функція pivotTable запускається після завантаження сторінки:
Нам не потрібно перевіряти виклик функції pivotTable кожен раз при зміні розміру вьюпорті (це сильно вдарить по продуктивності), тому я примусово знизив час повторного запуску до 200 мілісекунд при спрацьовуванні події resize:
Уповільнення робиться через функцію:
висновок
Техніка не підходить для всіх таблиць (в яких занадто багато стовпців і рядків), але може стати в нагоді для таблиць, як в нашому прикладі.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Фреймворк Bootstrap: практика адаптивної верстки від А до Я
Навчися верстати сайти, використовуючи всі можливості фреймворка Bootstrap.