Адаптивные таблицы при помощи только CSS стилей!

Я уже писал про разные способы сделать таблицы адаптивными. При работе с сайтом клуб-лада.рф получилось сделать адаптивную таблицу с горизонтальной прокруткой - только при помощи стилей (на фото - справа внизу).

Вот пример CSS, который был использован:

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

Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.

У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку. И так горизонтальная прокрутка появится только если таблица действительно не влазит по ширине в окно.

Также, таблицам были добавлены обычные переносы слов (без разрыва строк) о которых я писал в прошлой записи. Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми.

Демка.

Возникает вопрос - а почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?

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

Да и всех редакторов пришлось бы переучивать. В общем, сплошные проблемы. А код выше - простой, понятный и вполне кроссбраузерный.

Также, был сделан адаптивный дизайн для форума сайта (входит в стоимость) и разработано красивое разворачивающееся меню. Так как на сайте уже подключен jquery, то я написал скрипт меню на нем.

Да, один важный момент. Меню «мобильной версии» - это переделка обычного меню сайта. Ничего там не дублировалось. Просто добавлялись стили и код для работы.