Легкий способ адаптировать таблицу под мобильные устройства

На сегодняшний день HTML-таблицы утратили свою популярность в верстке элементов дизайна и были заменены блоками (header, menu, div, footer и др.), но они до сих пор применяются в области структуризации и представлении данных пользователям.

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

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

Создадим таблицу с перечислением некоторых цветов каталога Pantone в каждой из 6-и ячеек.

HTML-код:

<table class="pantone">
<tbody>
<tr>
<td style="background-color: #d977a9;">PANTONE 224</td>
<td style="background-color: #d3468f;">PANTONE 225</td>
<td style="background-color: #d70c7a;">PANTONE 226</td>
<td style="background-color: #af1c63;">PANTONE 227</td>
<td style="background-color: #8f2054;">PANTONE 228</td>
<td style="background-color: #6d2244;">PANTONE 229</td>
</tr>
</tbody>
</table>

CSS-код:

table.pantone {width: 100%; border-collapse: collapse;}
table.pantone td {padding: 0.6rem 1rem; color: #ffffff; font-weight: bold;}

С помощью изображения приведу то, как будет выглядеть полноценная таблица при фиксированной ширине 1140 пикс.

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

Видим, что вся информация, представленная в таблице, не входит в область экрана. Добавим к ячейкам правило CSS:

@media screen and (max-width: 800px) {
  table.pantone td {display: block;}
}

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

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

 4,913 total views,  6 views today