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

От Юрий Соколов Css и PHP хитрости 0 Комментариев

Недавно мы переработали таблицы с платежной информацией в мобильной версии 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>

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

</tr>

<tr>

<td data-label="Payment">Payment #2</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;
    }
}

@media screen and (max-width: 600px) {

table td:before {

content: attr(data-label);

float: left;

text-transform: uppercase;

font-weight: bold;

}

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

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

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

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

Блог