D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

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

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

table {border: 1px solid #333333;
width: 100% !important;
overflow: auto !important;
display: block !important;}

table tbody {display: table !important;
width: 99.9% !important;}

         Здесь я обвожу таблицу рамкой, чтобы было понятнее, что она не обрезана, а может прокручиваться по горизонтали.
         Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.
         У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку. И так горизонтальная прокрутка появится только если таблица действительно не влазит по ширине в окно.
         Также, таблицам были добавлены обычные переносы слов (без разрыва строк) о которых я писал в прошлой записи. Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми.
         Демка.

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

(24.03.2016 blogger) Адаптивный дизайн - Сайт и форум клуб-лада.рф

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

         
         
Главная, 1,
( 44 )