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

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

Прием 1

Горизонтальный скролл

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

table{
    min-width: 800px; /* устанавливаем желаемую минимальную ширину экрана */
}

Пример на codepen.io:

---

---

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

Прием 2

Добавим гибкости

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

/* Ширина экрана до 800px будет относиться к мобильным устройствам*/
@media(max-width: 800px) {
        /* Скрываем заголовки таблицы*/
        table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* объединяем границы ячеек */
        width: 50%;
    }
}

Пример на codepen.io:

---

---

А вот и проблемы, как результат такого решения:

1. Мы визуально скрываем столбец с заголовками thead, что в определенных случаях значительно затрудняет понимание содержимого таблицы,
2. Макет такой таблицы не универсален и требует доработки, в зависимости от того, какие данные и в каком объеме представлены в таблице.

Манипуляции с заголовками носят сугубо индивидуальный харктер. Я могу предложить три варианта представления заголовков thead для мобильных устройств в таблице:

1. заголовки можно скрыть,
2. заголовки можно стилизовать, используя все тот же flexbox,
3. заголовки можно перенести в span и поместить их в ячейки с данными.

Ниже приведены стили для вывода заголовков в дополнителыном элементе на мобильных устройствах:

/* Для настольных компьютеров скрываем span */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}

/* Стили для мобильных устройств */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* дополнительный отступ, чтобы избежать наложения заголовка */
        position: relative;
        width: 50%;
    }
    /* Показываем span для мобильных устройств */
    table td span {
        display: block;
    }
}

Пример на codepen.io:

---

---

Зачем мне нужны таблицы?

Все очень просто: такой подход семантически верен.

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

---

Спасибо за внимание.