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

Дата публикации: 2016-10-25

От автора: меня раздражает, что очень часто таблицы плохо оптимизированы под мобильные устройства. К примеру, я на википедии со своего 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>

<table>

<caption>Statement Summary</caption>

<thead>

<tr>

<th scope="col">Account</th>

<th scope="col">Amount</th>

<th scope="col">Period</th>

</tr>

</thead>

<tbody>

<tr>

</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;
}

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

@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 выполняет роль лейбла. Вот наша таблица (переверните свое устройство):

Это все?

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

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

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

Метки: адаптивная верстка