Самый удивительный трюк для мобильной отзывчивости таблиц, который вам когда-либо понадобится — только с помощью html и css

Таблицы являются одним из наиболее используемых компонентов пользовательского интерфейса для представления и организации данных, но настройка их отзывчивости для мобильных устройств никогда не была простой задачей.

Наиболее распространенная практика настройки отзывчивости таблиц для мобильных устройств, которая встречается почти повсеместно в Интернете, — это стилизация контейнера div таблицы с помощью функции

overflow-x:auto;

Вот так,

<div style="overflow-x:auto;">
  <table>
    ..table headers and rows
  </table>
</div>

С приведенным выше кодом, когда вы находитесь на устройствах с небольшой шириной, например, мобильных, данные отображаются, но вам нужно прокручивать их в направлении x, что, на мой взгляд, не очень удобно для пользователя, хотя это и шаг вперед.

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

Кому это может не понравиться!

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

Помните, что это возможно только с помощью HTML и CSS. Звучит интересно? Я знаю, да!

Без лишних слов,

Мы будем использовать принципы «отзывчивого дизайна» (CSS @media queries), чтобы определить, не меньше ли экран, чем максимальный размер нашей таблицы. Если это так, мы переформатируем таблицу, но не волнуйтесь, ничего сложного в этом нет.

Давайте воспользуемся этой простой таблицей

<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 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>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Corporate AMEX</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$1,181</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">Visa - 3412</td>
      <td data-label="Due Date">02/01/2016</td>
      <td data-label="Amount">$842</td>
      <td data-label="Period">01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>

Вот и все с HTML

Давайте добавим несколько стилей, чтобы сделать это еще лучше.

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

Приведенная выше таблица выглядит следующим образом

1. На рабочем столе

На рабочем столе все в порядке, и никто не может быть доволен этим, я думаю.

1. На мобильном

Надеюсь, вы видите, что содержимое стало более растянутым, прежде чем мы использовали наш трюк. Конечно, его вид не может вызвать улыбку на вашем лице.

Как вы видели из приведенных выше результатов, приведенный выше код просто дает нам обычную таблицу, но я хочу, чтобы вы были внимательны здесь, Вы заметили атрибут data-label, который я добавил к каждой таблице в нашем HTML?

Как вы могли заметить, атрибут data-label каждого td имеет содержание, эквивалентное заголовку таблицы, который

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

В css мы добавим еще несколько кодов, чтобы наша таблица лучше выглядела на маленьких устройствах. Kepp сосредоточился на том, чтобы знать, что происходит на мобильных устройствах. Все остальное было обычным.

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  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;
    margin-bottom: .625em;
  }

 /*Here we are setting each td display to block*/
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

/*
Now the other data-label we have added on each td comes into play.
*/

  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

Давайте посмотрим, что это добавляет к красоте нашей таблицы.

Знаете что, улыбнитесь, мы сделали это.

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

Примечание: Если вы хотите поиграть с кодами, посетите эту ссылку, которая приведет вас к кодепену.

Что дальше

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

Спасибо, что были с нами до конца. Бум! Вы, приятели, никогда не разочаруетесь (: