Герб Украины
Верим в Украину и ВСУ. Слава Украине!

Адаптивная таблица (как сделать адаптивную таблицу Table на CSS — пример)

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

 

Для начала вы можете скачать и взглянуть как работает адаптивная таблица.

 Download — Demo

 

Долго и нудно объяснять не вижу смысла. По сути все что вам нужно сделать, это дописать стили:

Читайте також:  Обзор возможностей съемки в HDR на DJI Mavic 3
Читайте також:  Скрипт для мониторинга работы сайтов с уведомлением на почту

В моем варианте я вовсе скрываю хедер таблицы, названия, они мне не нужны. В архиве вы можете увидеть как их оставить, они прописываются через свойство before. На этом все, адаптивная таблица готова. Если у вас есть вопросы, всегда рад помочь.

2. Способ стилизации таблиц для телефона — добавление горизонтального скрола, прокрутки.

Добавьте в ваш css файл следующий код

 

Tags

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *