Адаптивная таблица на чистом 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="Адрес">http://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="Адрес">http://ruxe-engine.ru/viewforum.php?f=10&sid=e8de49937b69f576ddc4a7ebb70b1dca</td>
<td data-label="Откуда">http://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 - 29 марта 2016, 06:41 - 10079 просмотров


Похожие записи: Кастомные теги как в Facebook


Комментарии




Зарегистрируйтесь или войдите в Ваш аккаунт, чтобы оставить комментарий.




 
2 июня 2016, 11:49 «Цитировать»
оО
А вы пользуетесь ie9??? О проблемах Интернет Экспрорера я уже писал: webdesign.ru.net/article/bednyy-oslik-ie.html. Возвращаться к этой теме не планирую. На работе у меня есть ИЕ, но версии 11 (который всё прекрасно понимает). Если мы будем оглядываться назад, то мы начнём громоздить дополнительные css для IE, отдельные ссылки для телефонов и т.д. Вперёд и только вперёд! Современные браузеры держатся в фарватере.
И да! "Таблица должна оставаться таблицей", без неё никуда, если мы выводим табличные данные. Но вёрстка таблиц блоками не даёт нам свободы, так как размер блоков автоматически самостоятелен, а размер ячеек привязан к основе и формирует подобные строки и столбцы. Флекс, как решение, ещё не всеми современными браузерами поддерживается.
На ГитХабе у меня есть свой проект, где, в том числе я пытаюсь работать с таблицами. Присоединяйтесь.

---
В действительности всё не так, как на самом деле!

 
2 июня 2016, 09:41 «Цитировать»
Taurlom
такая таблица не будет работать например в ie9, так как он не поддерживает display:block для ячеек таблицы.. и правильно что не поддерживает, таблица должна оставаться таблицей.. чтобы было кроссбраузерно, надо верстать такую таблицу блоками (display:table, table-row, table-cell)..

 


Вход на сайт


Avatar