Новый подход к адаптивным таблицам

27 апреля 2018 | Опубликовано в css | 1 Комментарий »

Geoff Yuen продемонстрировал очень эффективный способ создания адаптивных таблиц HTML. У этого примера было всего две небольших проблемы: код CSS был записан в Sass и в нем было много повторений и избыточность в использовании атрибута данных. Наше решение не имеет этих недостатков.

Вам нужно открыть страницу с примером в окне браузера шириной менее 600 пикселей, чтобы заметить переход в альтернативный режим верстки таблицы.

Основной код

Начнем с объяснения кода примера, созданного Geoff Yuen:

<table id="miyazaki">
        <caption>The Films of Miyazaki</caption>
        <thead>
                <tr><th>Film<th>Year<th>Honor
        <tbody>
                <tr>
                        <td data-th="Film">My Neighbor Totoro
                        <td data-th="Year">1988
                        <td data-th="Honor">Blue Ribbon Award (Special)
                <tr>
                        <td data-th="Film">Princess Mononoke
                        <td data-th="Year">1997
                        <td data-th="Honor">Nebula Award (Best Script)
                <tr>
                        <td data-th="Film">Spirited Away
                        <td data-th="Year">2001
                        <td data-th="Honor">Academy Award (Best Animated Feature)
                <tr>
                        <td data-th="Film">Howl’s Moving Castle
                        <td data-th="Year">2004
                        <td data-th="Honor">Hollywood Film Festival (Animation OTY)
</table>

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

Базовый код CSS этого примера:

table#miyazaki caption {
        font-size: 2rem;
        color: #444;
        margin: 1rem;
        background-image: url(miyazaki.png), url(miyazaki2.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center left, center right;
}
table#miyazaki {
        border-collapse: collapse;
        font-family: Agenda-Light;
        font-weight: 100;
        background: #333;
        color: #fff;
        text-rendering: optimizeLegibility;
        border-radius: 5px;
}
table#miyazaki thead th {
        font-weight: 600;
}
table#miyazaki thead th,
        table#miyazaki tbody td {
        padding: .8rem;
        font-size: 1.4rem;
}
table#miyazaki tbody td {
        padding: .8rem;
        font-size: 1.4rem;
        color: #444;
        background: #eee;
}
table#miyazaki tbody tr:not(:last-child) {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
}

Код CSS для создания адаптивности таблицы — перехода в альтернативный режим:

@media screen and (max-width: 600px) {
        table#miyazaki caption {
                background-image: none;
        }
        table#miyazaki thead {
                display: none;
        }
        table#miyazaki tbody td {
                display: block;
                padding: .6rem;
        }
        table#miyazaki tbody tr td:first-child {
                background: #333;
                color: #fff;
        }
        table#miyazaki tbody td:before {
                content: attr(data-th);
                font-weight: bold;
                display: inline-block;
                width: 6rem;
        }
}

Запрос media прячет ячейки заголовков таблицы и показывает спрятанные значения атрибута data-th как подпись перед содержимым каждой ячейки таблицы на отдельной строке. Особый внешний вид задается первой ячейке каждой трансформированной строки, чтобы данные оставались визуально разделенными.

Автоматизируем результат

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

Для начала упростим HTML код таблицы:

<table id="miyazaki">
<caption>The Films of Hayao Miyazaki</caption>
<thead>
        <tr>
                <th>Film
                <th>Year
                <th>Honor
<tbody>
        <tr>
                <td>My Neighbor Totoro
                <td>1988
                <td>Blue Ribbon Award (Special)
        <tr>
                <td>Princess Mononoke
                <td>1997
                <td>Nebula Award (Best Script)
        <tr>
                <td>Spirited Away
                <td>2001
                <td>Academy Award (Best Animated Feature)
        <tr>
                <td>Howl’s Moving Castle
                <td>2004
                <td>Hollywood Film Festival (Animation OTY)
</table>

В конце документа добавим небольшой скрипт:

var headertext = [];
var headers = document.querySelectorAll("#miyazaki th"),
tablerows = document.querySelectorAll("#miyazaki th"),
tablebody = document.querySelector("#miyazaki tbody");
for(var i = 0; i < headers.length; i++) {
        var current = headers[i];
        headertext.push( current.textContent.replace( /\r?\n|\r/,"") );
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
                col.setAttribute("data-th", headertext[j]);
        }
}

Этот скрипт получает текстовое содержимое каждой ячейки заголовка и отбрасывает символы перевода строки и возврата каретки. После этого этот текст применяется как значение атрибута данных к подходящим ячейкам таблицы, получая те же результаты, что и код CSS выше. Функция setAttribute используется вместо dataset, так как последняя поддерживается только в браузере Internet Explorer версии 11.

Полученный результат по-прежнему доступен для слепых пользователей, вставляемый текст DOM читается, например, программой VoiceOver, хотя нужны дополнительные проверки.

Откройте наш пример в новом окне браузера и попробуйте изменить его размер:

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

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

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

Опубликовано в css, апреля 27, 2018
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Сергей
28 апреля 2018 в 4:50
0

Добрый день!
Подскажите пожалуйста, почему скрипт срабатывает только для одной таблицы? А если на странице несколько таблиц?
PS: Естественно #miyazaki я поменял просто на какой-то класс, чтобы не привязываться к конкретному ID. И в таком случае всё это работает только для первой таблицы, для остальных таблиц не работает.
В чем проблема?

Новый подход к адаптивным таблицам

Основной код

Автоматизируем результат

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые