Блог

Адаптивные таблицы на чистом CSS

Недавно мы переработали таблицы с платежной информацией в мобильной версии Merchant Center. Нашей целью было добиться следующих условий:

  • Без JavaScript. Можно найти несколько готовых решений на JavaScript, но было бы здорово реализовать все на чистом CSS.
  • Текст должен быть локализован, поэтому его нельзя было хранить в таблицах стилей, как в примере Криса Койера, хотя результат в основном построен на его идее. Плюс, правильнее хранить контент в том представлении, к которому он относится.
  • Никакой регулировки размера шрифта до 8px и запихивания контента

Псевдо-элементы и data-атрибуты спешат на помощь

Псевдо-элементы, а именно :before и :after, представляют собой виртуальные элементы в начале и в конце выбранного элемента. Обычно они используются для добавления косметического контента, например, стрелочек у всплывающих подсказок, создания красивой ленты, добавления иконок и т.д. Содержимое псевдо-элемента можно задать в data-атрибуте получить с помощью content: attr(data-label). Посмотрим, как мы можем это использовать для доработки таблицы под мобильные устройства.

Допустим, у нас есть следующая структура HTML:

Используем следующий CSS, чтобы добавить содержимое data-атрибута в каждую колонку на устройствах с шириной экрана меньше 600px.

Теперь наша таблица

адаптация таблиц для мобильных устройств

адаптация таблиц для мобильных устройств

принимает вид

адаптация таблиц для мобильных устройств

адаптация таблиц для мобильных устройств

Поделиться постом

Оставить комментарий

avatar
  Подписаться  
Уведомление о