Каждый верстальщик рано или поздно сталкивается с вопросом адаптации таблиц под планшеты и мобильные устройства. На сам деле это действительно проблема, табличная верстка не предназначена для таких целей. Во времена когда ее часто использовали, ни кто и предположить не мог что технологии адаптации шагнут так далеко. Но отказаться на все 100% от табличной верстки мы не можем. Она до сих пор встречается на сайтах, в интернет магазинах. Обычно это списки заказов, либо характеристики товаров. Почему так? Потому что такие таблички не просто сверстать дивами (div) и зациклить т.к. функционал движков будет выводить эти характеристики в цикле. Но тогда возникает вопрос, как же сделать адаптивную таблицу? Да еще что бы не дописывать в нее классы, для всех таблиц? Есть решение. И так, приступим.
Для начала вы можете скачать и взглянуть как работает адаптивная таблица.
Долго и нудно объяснять не вижу смысла. По сути все что вам нужно сделать, это дописать стили:
В моем варианте я вовсе скрываю хедер таблицы, названия, они мне не нужны. В архиве вы можете увидеть как их оставить, они прописываются через свойство before. На этом все, адаптивная таблица готова. Если у вас есть вопросы, всегда рад помочь.
2. Способ стилизации таблиц для телефона — добавление горизонтального скрола, прокрутки.
Добавьте в ваш css файл следующий код
Добавить комментарий