Адаптивная таблица на чистом 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 - 8448 просмотров


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


Комментарии




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




 
15 ноября 2016, 16:13 «Цитировать»
Руслан писал(а):
Administrator, Пример с объединенными ячейками http://take.ms/BkFZI

А! Понял! Надо попробовать. напишу, как получилось!

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

 
15 ноября 2016, 15:39 «Цитировать»
Руслан
Administrator, Пример с объединенными ячейками http://take.ms/BkFZI

 
15 ноября 2016, 15:37 «Цитировать»
Руслан, я ваш вопрос не понял.
Что такое - "совмещенные ячейки как по вертикали так и по горизонтали"?
CSS написан так, что те ячейки, которые располагались по вертикали, становятся горизонтальными с заголовком (th) на более тёмном фоне. Теоретически этот вариант можно оформить и в другом виде, но этот - самый простой!

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

 
15 ноября 2016, 15:06 «Цитировать»
Руслан
В вашей таблице возможны совмещенные ячейки как по вертикали так и по горизонтали?

 
9 ноября 2016, 08:29 «Цитировать»
Сергей, по-моему, всё получилось у вас. Вполне адаптивно! Тем более, что таблица сложная, переполненная текстом! Поздравляю.

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

 
7 ноября 2016, 22:56 «Цитировать»
николай
Большое спасибо за статью.
Taurlom,
решается созданием отдельного css файла для IE9 . Со следующим кодом:

@media screen and (max-width:1024px){
table td {
float: left; /* IE 9 */
}
}

 
28 октября 2016, 12:12 «Цитировать»
Сергей, тут всё можно подробно рассмотреть и проанализировать. Затем добавить к вашей таблице атрибуты и дополнить код CSS.

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

 
28 октября 2016, 11:53 «Цитировать»
Сергей
Вот тут www.tc.belhard.com/courses/courses2.php у меня была задача не трогая код, только с помощью CSS сделать адаптивную страницу.

 
5 августа 2016, 17:06 «Цитировать»
Сагчес
Если не прав, то поправьте. Скажите, а зачем вам адаптивная таблица на ie9?

 
5 июня 2016, 23:50 «Цитировать»
Екатерина
Спасибо! То что я искала!

 


Вход на сайт


Avatar