Как сделать таблицы адаптивными с CSS

Дата публикации: 2019-07-04

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

Моя недавняя статья на HackerNews Пишите HTML, как будто сейчас 1999 год, получила намного больше внимания, чем я ожидал. Последовало несколько комментариев, в которых говорилось о том, что элементы table не очень хорошо работают с мобильными устройствами или о невозможности использования удобного макета на небольших экранах. Это просто неправда.

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

Демо 1: Просто позвольте им прокручиваться

Хорошо, я признаю, что эта реализация не самая лучшая, но я считаю, что она хорошо работает с огромными наборами данных. Просто установите min-width для родительского элемента table, и браузер просто потребует от пользователя прокручивать содержимое по горизонтали.

table {
    min-width: 800px; /* Установите здесь нужный min-width */
}

table {

min-width: 800px; /* Установите здесь нужный min-width */

}

Посмотрите CodePen ниже, чтобы увидеть ее в действии:

Я на самом деле предпочитаю этот метод из-за его простоты и функциональности. Пользователи на мобильных устройствах знакомы с прокруткой, поскольку это одно из основных необходимых действий. «Обрезка» таблицы дает им мгновенный визуальный сигнал, что они могут прокручивать контент.

Демо 2: Более гибкая, чем вы думаете

Использование чего-то наподобие flexbox имеет тенденцию работать лучше, когда вы имеете дело с меньшими наборами табличных данных. Все, что вам нужно сделать, это добавить небольшую разметку 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%;
    }
}

/* Используем 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:

Есть некоторые предостережения, относящиеся к этому подходу:

В настоящее время мы скрываем строку thead в мобильном представлении (только визуально — программы чтения с экрана все еще могут сканировать ее)

Может потребоваться дополнительная работа в зависимости от того, сколько элементов в строке flexbox имеет смысл размещать (на основе проекта и набора данных)

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

/* Стили 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;
}

/* Простой CSS для flexbox-таблиц на мобильных устройствах */
@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;
    }
}

/* Стили 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;

}

/* Простой CSS для flexbox-таблиц на мобильных устройствах */

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

}

Обновление: как указал пользователь mmoez, гораздо чище будет использовать псевдо-селекторы :nth-child для реализации полей заголовков на мобильных устройствах.

Почему я должен обращать внимание на использование элементов table?

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

Автор: Bradley Taunt

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

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

Метки: таблицы