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

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

Оригинал: Responsive Tables in Pure CSS, Will Wallace

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

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

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

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

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


<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.


@media screen and (max-width: 600px) {
    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
}

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

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

Демо на codepen

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться