Верстка адаптивної таблиці, Нотатки верстальника
Адаптивні сайти вже давно перестали бути дивиною і вони зустрічаються все частіше і частіше. Враховуючи останні новини з ранжуванням пошукових систем (якщо хтось не знає, у пошуку з мобільного пристрою пріоритет віддається адаптивним сайтам), кількість таких сайтів зростатиме і надалі. Можна бути противником адаптації під мобільні пристрої або ж виступати за, але факт залишається фактом: все частіше клієнти вимагають, щоб їх сайт був адаптивним і веб-майстрам доводиться це робити.
Однією з головних проблем адаптації сайту під різні дозволи є таблиці. Особливо якщо у них дуже багато даних. Давайте розглянемо два способи верстки адаптивної таблиці.
Для початку подивимося як виглядає таблиця:
Bootstrap-спосіб верстки адаптивної таблиці
Скажімо прямо: по-справжньому адаптивною таку таблицю не назвеш. Вона добре виглядає на мобільному, нічого нікуди не випирає і верстка сайту не тече. Такий спосіб добре підходить, якщо на вашому сайті таблиці зустрічаються рідко і немає сенсу підключати якийсь плагін та писати додаткові стилі через них. Такий спосіб використовується Bootstrap-ом. Отже, як це реалізується?
Все просто: таблиця обгорнута в div, якому задана максимальна ширина 100% і overflow: auto.
Якщо таблиця довга, можна також задати максимальну висоту і зафіксувати шапку таблиці.
Результат, як і наступний приклад, можна переглянути на цій сторінці .
Верстка по-справжньому адаптивної таблиці
Якщо ж у вас на сайті часто зустрічаються таблиці, має сенс скористатися плагіном Footable.
Для початку потрібно підключити плагін (завантажити на GitHub або підключити з CDN), а також ініціалізувати його:
Тут потрібне дещопрояснити: скрипт чомусь вважає не ширину viewport-а, а ширину таблиці. Щоб це виправити, потрібно трохи «модернізувати» скрипт:
В ініціалізації вказуємо клас таблиці або просто тег table, якщо хочемо, щоб усі таблиці на сайті були адаптивними.
Далі для осередків у шапці таблиці, за допомогою data-атрибутів вказуємо на яких розмірах які колонки будуть ховатися:
Контрольні точки можна вказати в ініціалізації:
Це означає, що в проміжку 0-720 діє правило для mobile, 720-1024 - tablet, а вище 1024 - desktop. Ніщо не заважає створити вам ще більше правил, якщо це потрібно.
Також можна зробити, щоб якась колонка була розкрита за замовчуванням. Для цього вказуємо data-атрибут data-expanded=«true»
У цьому можливості плагіна не закінчуються, але створення адаптивних таблиць цього цілком достатньо. Решту можливостей розглянемо наступного разу.