TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Адаптивная таблица за счет скрола

1 882

Всем добра, не давно на работе пришлось переносить весьма старый сайт со всем его содержимым с Joomla 1,5 (одно слово Joomla у меня давно вызывает дрожжжжжж и нервный тик) на WordPress 4.9.3. Учитывая что весь контент наполнялся девушкой которая переносила таблицы на страницы старой версии сайта копипастом из Word документов, мне пришлось весьма нелегко с переносом этих самых злосчастных таблиц. К тому же я решил не облегчать свои страдания простым переносом уже не правильных по своей верстке таблиц, а немного утяжелил данный процесс дополнительной оберткой тела

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

Пример таблицы:

Код обвертки страницы:

Как Вы уже догадались содержимое своих таблиц вставляем между:

Полезное видео по теме:

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее