Адаптивные таблицы на чистом CSS
Недавно мы переработали таблицы с платежной информацией в мобильной версии Merchant Center. Нашей целью было добиться следующих условий:
- Без JavaScript. Можно найти несколько готовых решений на JavaScript, но было бы здорово реализовать все на чистом CSS.
- Текст должен быть локализован, поэтому его нельзя было хранить в таблицах стилей, как в примере Криса Койера, хотя результат в основном построен на его идее. Плюс, правильнее хранить контент в том представлении, к которому он относится.
- Никакой регулировки размера шрифта до 8px и запихивания контента
Псевдо-элементы и data-атрибуты спешат на помощь
Псевдо-элементы, а именно :before и :after, представляют собой виртуальные элементы в начале и в конце выбранного элемента. Обычно они используются для добавления косметического контента, например, стрелочек у всплывающих подсказок, создания красивой ленты, добавления иконок и т.д. Содержимое псевдо-элемента можно задать в data-атрибуте получить с помощью content: attr(data-label). Посмотрим, как мы можем это использовать для доработки таблицы под мобильные устройства.
Допустим, у нас есть следующая структура HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<table> <thead> <tr> <th>Payment</th> <th>Issue Date</th> <th>Amount</th> <th>Period</th> </tr> </thead> <tbody> <tr> <td data-label="Payment">Payment #1</td> <td data-label="Issue Date">02/01/2015</td> <td data-label="Amount">$2,311</td> <td data-label="Period">01/01/2015 - 01/31/2015</td> </tr> <tr> <td data-label="Payment">Payment #2</td> <td data-label="Issue Date">03/01/2015</td> <td data-label="Amount">$3,211</td> <td data-label="Period">02/01/2015 - 02/28/2015</td> </tr> </tbody> </table> |
Используем следующий CSS, чтобы добавить содержимое data-атрибута в каждую колонку на устройствах с шириной экрана меньше 600px.
1 2 3 4 5 6 7 8 |
@media screen and (max-width: 600px) { table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } } |
Теперь наша таблица
принимает вид
Оставить комментарий