Каждый верстальщик рано или поздно сталкивается с вопросом адаптации таблиц под планшеты и мобильные устройства. На сам деле это действительно проблема, табличная верстка не предназначена для таких целей. Во времена когда ее часто использовали, ни кто и предположить не мог что технологии адаптации шагнут так далеко. Но отказаться на все 100% от табличной верстки мы не можем. Она до сих пор встречается на сайтах, в интернет магазинах. Обычно это списки заказов, либо характеристики товаров. Почему так? Потому что такие таблички не просто сверстать дивами (div) и зациклить т.к. функционал движков будет выводить эти характеристики в цикле. Но тогда возникает вопрос, как же сделать адаптивную таблицу? Да еще что бы не дописывать в нее классы, для всех таблиц? Есть решение. И так, приступим.
Для начала вы можете скачать и взглянуть как работает адаптивная таблица.
Долго и нудно объяснять не вижу смысла. По сути все что вам нужно сделать, это дописать стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | table {text-align: center;} @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none!important; width: 100%!important; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ } |
В моем варианте я вовсе скрываю хедер таблицы, названия, они мне не нужны. В архиве вы можете увидеть как их оставить, они прописываются через свойство before. На этом все, адаптивная таблица готова. Если у вас есть вопросы, всегда рад помочь.
Отличное решение