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

Для примера рассмотрим таблицу совместимости браузеров. Структура в этом случае будет состоять не из разметки таблиц, а из списка определений:

<p class="definition-table-caption">Browser support
<dl class="definition-table">
        <dt data-version="Chrome 12+"><img src="chrome.svg" alt="Chrome">
        <dd>Chrome 12+
        <dt data-version="Firefox 14+"><img src="firefox.svg" alt="Firefox">
        <dd>Safari 6+
        <dt data-version="Android 4+"><img src="android.svg" alt="Android">
        <dd>Android 4+
</dl>

Здесь теги <dt> используются как ячейки заголовка таблицы, а элементы <dd> — как ячейки содержимого таблицы. Обратите внимание, содержимое каждого объявления дублируется в значении атрибута данных для соответствующего термина определения. Атрибут данных записывается в свободной форме: можно использовать любой суффикс после data- и после его создания, атрибут может содержать любое значение.

Задаем код CSS

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

p.definition-table-caption {
        text-align: center;
        font-weight: bolder;
}
dl.definition-table {
        display: table;
}
dl.definition-table dt {
        font-weight: bolder;
        display: table-cell;
        text-align: center;
}
dl.definition-table dt img {
        margin: .5rem;
        width: 3rem;
}

Чтобы список определений выглядел как таблицы, спрячем настоящие определения списка определений и покажем значения атрибута данных ниже терминов списка определений:

dl.definition-table dd {
        display: none;
}
dl.definition-table dt:after {
        display: block;
        position: relative;
        content: attr(data-version);
        left: 0; top: 0;
}

Это создаст внешний вид таблицы без использования разметки таблицы.

Делаем таблицу адаптивной

При сужении окна браузера нам нужно изменить расположение таблицы, разместив информацию в горизонтальных строках. В подходящих точках перехода @media включим снова теги <dd>, зададим им всплытие вправо, отображая связанный термин слева, и отключим показ созданного содержимого:

@media screen and (max-width: 600px) {
        dl.definition-table dt:after {
                display: none;
        }
        dl.definition-table dd {
                display: block;
                float: right;
                margin-top: 1rem;
        }
        dl.definition-table dt {
                display: block;
                float: left;
                clear: left;
        }
        dl.definition-table dt img {
                vertical-align: middle;
        }
}

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

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Новый подход к адаптивным таблицам
• Создание раскладывающейся трехмерной галереи изображений
• Создание галереи изображений на чистом CSS