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

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

 

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

 Download – Demo

 

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

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

Олег

Отличное решение

Відповіcти
Ярослав

Красавчик, не совсем кроссбраузерно и не все версии поддерживают, но очень классное решение, я бы не догадался)

Відповіcти
Юлия

Приветствую.
А как сделать, чтобы хедер таблицы не скрывался совсем? У меня таблица с размерами и без хедера никак.
тут вот пример на тестовом.
Очень буду благодарна за помощь!!! Заранее спасибо

Відповіcти
Digrand

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

Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *