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

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

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

Нарисуем таблицу графика работы службы доставки со сменными курьерами и ценами, добавив атрибут aria-label (текстовую метку) к ячейкам с данными.

HTML-код:

<table class="delivery">
<thead>
<tr>
<th>Время доставки</th>
<th>Курьер</th>
<th>Оплата картой</th>
<th>Стоимость доставки</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-label="Время доставки">8:00-12:00</td>
<td aria-label="Курьер">Николай</td>
<td aria-label="Оплата картой">Нет</td>
<td aria-label="Стоимость доставки">20 руб.</td>
</tr>
<tr>
<td aria-label="Время доставки">12:00-18:00</td>
<td aria-label="Курьер">Вадим</td>
<td aria-label="Оплата картой">Да</td>
<td aria-label="Стоимость доставки">50 руб.</td>
</tr>
<tr>
<td aria-label="Время доставки">18:00-23:00</td>
<td aria-label="Курьер">Алексей</td>
<td aria-label="Оплата картой">Да</td>
<td aria-label="Стоимость доставки">120 руб.</td>
</tr>
<tr>
<td aria-label="Время доставки">1:00-6:00</td>
<td aria-label="Курьер">Евгений</td>
<td aria-label="Оплата картой">Нет</td>
<td aria-label="Стоимость доставки">90 руб.</td>
</tr>
</tbody>
</table>

CSS-код:

table.delivery {width: 100%; border: 0px; border-collapse: collapse;}
table.delivery thead {font-weight: bold;}
table.delivery td {padding: 0.6rem 1rem; border-bottom: 1px solid #e8e9eb;}

Внешний вид таблицы на ПК с фиксированным разрешением 1140 пикс. будет выглядеть примерно так.

При уменьшении разрешения дисплея до 334 пикс. ячейки сожмутся на сколько это возможно и оставят часть информации скрытой.

С помощью CSS мы сможем добиться нужно эффекта – разделение таблицы на понятные посетителю блоки при разрешении экрана меньше 800 пикс. Просто добавим к уже созданным стилям следующий код:

@media screen and (max-width: 800px) {
  table.delivery thead {
    display: none;
  }
  table.delivery tr {
    display: block;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e8e9eb;
  }
  table.delivery td {
    display: block;
    text-align: right;
  }
  table.delivery td:before {
    content: attr(aria-label);
    float: left;
    font-weight: bold;
  }
}

На скриншоте ниже вы можете наглядно оценить превосходство данного метода.

Спасибо за внимание! Не забывайте ставить оценку в рейтинге статьи!

 13,004 total views,  1 views today