Адаптивная таблица на чистом html и css!
Я давно мечтал приручить такую дикую штуку, как таблица. Таблицы в HTML ведут себя очень непредсказуемо. Язык интернета постоянно развивается, а таблицы остаются прежними. И меняться, похоже, не собираются. Они плохо поддаются стилизации посредством CSS и принципам адаптивности. Но я всё-таки нашёл способ, как сделать таблицу «отзывчивой», адаптивной.
Автор описываемого мною метода – Майкл Чен, который предложил изящный метод придания таблице адаптивности. Он присвоил ячейкам таблицы атрибут «data-label», пришедший к нам из Exel, в соответствии с колонкой, в которой располагается ячейка.
<table>
<thead>
<tr>
<th>Адрес</th>
<th>Откуда</th>
<th>Браузер</th>
<th>IP</th>
<th>Дата и время</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Адрес">https://webdesign.ru.net/download/</td>
<td data-label="Откуда">https://github.com/maindefine/ruxe-engine/blob/master/README.md</td>
<td data-label="Браузер">Mozilla Firefox 5.0</td>
<td data-label="IP">127.0.0.1</td>
<td data-label="Дата и время">April 17, 1937</td>
</tr>
***
<tr>
<td data-label="Адрес">https://ruxe-engine.ru/viewforum.php?f=10&sid=e8de49937b69f576ddc4a7ebb70b1dca</td>
<td data-label="Откуда">https://localhost/test/search.html</td>
<td data-label="Браузер">May 15 1928</td>
<td data-label="IP">127.0.0.1</td>
<td data-label="Дата и время">April 17, 21:15:03</td>
</tr>
</tbody>
</table>
При обычных, больших разрешениях монитора атрибут скрыт. Мы видим только заголовки колонок таблицы (THEAD). Для того чтобы его показать, необходимо указать правило в медиа-запросах CSS. И тогда шапка таблицы исчезает, а у каждой ячейки появляется метка, в соответствии с колонкой.
table thead {
display: none;
}
table td:before {
content: attr(data-label);
}
Пример такой таблицы можно посмотреть здесь. Поиграйте размером окна браузера, внимательно проанализируйте файл css. Если вы найдёте метод изящнее, напишите мне, обсудим!
Опубликовал Administrator - 20 февраля 2016, 06:41 - 485 просмотров
Похожие записи: Кастомные теги как в Facebook