Адаптивный табличный макет

Адаптивный табличный макет

От автора: меня раздражает, что очень часто таблицы плохо оптимизированы под мобильные устройства. К примеру, я на википедии со своего iPhone просматриваю список серий сериала Звёздный путь: Следующее поколение (да, я вырос в поздних 80-х), а в таблице очень много колонок и информации. И мне приходится долго листать назад и вперед, переворачивать телефон. Все это сильно раздражает.

Это довольно распространенная проблема, хотя в сети есть несколько решений с адаптивными таблицами. В том числе и шаблон на чистом CSS.

Так что мешает воспользоваться этим или другим шаблоном? Время? Силы? Как насчет быстро пробежаться по этим шаблонам?

С чего начать?

Создадим такую же таблицу, как сверху, при помощи простого HTML:

<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Visa - 3412</td>
      <td>04/01/2016</td>
      <td>$1,190</td>
      <td>03/01/2016 - 03/31/2016</td>
    </tr>
  </tbody>
</table>

У нашей таблицы 4 колонки. Давайте пропишем немного стилей:

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}

Таблица точно такая же, как и другие HTML таблицы, с которыми вы работали. И теперь вы можете задаться вопросом: «Как сделать ее адаптивной?».

Добавляем адаптивность!

Сперва мы добавим атрибут data-label ко всем ячейкам таблицы со значением имени соответствующей колонки. Это нам пригодится для лейблов.

<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>

Теперь можно начать писать медиа запросы:

@media screen and (max-width: 600px) {
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  table td:before {
    content: attr(data-label);
    float: left;
  }
}

На маленьких экранах элементы tr и td будут отображаться в виде блоковых элементов, а не как строки и ячейки таблицы. А псевдокласс :before выполняет роль лейбла. Вот наша таблица (переверните свое устройство):

Это все?

Да, в значительной степени. По крайней мере, для этого примера. Не забывайте, что это только один пример адаптивного табличного макета с относительно простыми данными. У вас будет уже свой макет с более сложными данными. Все может отличаться. Всегда рассматривайте все варианты для лучшего пользовательского опыта.

Источник: http://allthingssmitty.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree