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

21.03.2017

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

 

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

Скачать: ResponsiveTables
Адаптивная таблица (пример)
Скачано: 1182, размер: 2.3 KB, дата: 16.Май.2017

 

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

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

Олег

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

Ответить
Ярослав

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

Ответить
Юлия

Приветствую.
А как сделать, чтобы хедер таблицы не скрывался совсем? У меня таблица с размерами и без хедера никак.
тут вот пример на тестовом http://yulius6q.bget.ru/index.php?route=product/product&product_id=42
Очень буду благодарна за помощь!!! Заранее спасибо

Ответить
Digrand

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

Ответить

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

Ваш e-mail не будет опубликован.