«
»
CSSjQueryWEBWordPressWordPress - CSSWordPress - jQuery

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

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

(<tbody>...</tbody>)

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

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

<style> #table-wrapper { position:relative; } #table-scroll { height:100%; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; } #table-wrapper table * { /*background:yellow;*/ color:black; } #table-wrapper table thead th .text { position:absolute; top:-20px; z-index:2; height:20px; width:35%; border:1px solid red; } </style> <div id="table-wrapper"> <div id="table-scroll"> <table style="width: 615px; border: none; margin-right: auto; text-align: left; margin-left: auto;" border="1" cellspacing="0" cellpadding="0"> <!----------------------------- ADAPTIVE TABLE -------------------------------> <!------START------> <!----------------------------------------------------------------------------> <tbody> <tr id="row_0"> <td> <p id="lyric_0" class="lyric_line"> Song lyrics line 1<br> </p> </td> </tr> <tr id="row_1"> <td> <p id="lyric_1" class="lyric_line"> Song lyrics line 2<br> </p> </td> </tr> <tr id="row_2"> <td> <p id="lyric_2" class="lyric_line"> Song lyrics line 3<br> </p> </td> </tr> <tr id="row_3"> <td> <p id="lyric_3" class="lyric_line"> Song lyrics line 4<br> </p> </td> </tr> <tr id="row_4"> <td> <p id="lyric_4" class="lyric_line"> Song lyrics line 5<br> </p> </td> </tr> <tr id="row_5"> <td> <p id="lyric_5" class="lyric_line"> Song lyrics line 6<br> </p> </td> </tr> </tbody> <!----------------------------- ADAPTIVE TABLE -------------------------------> <!------END------> <!----------------------------------------------------------------------------> </table> </div> </div>

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

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

<style> #table-wrapper { position:relative; } #table-scroll { height:100%; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; } #table-wrapper table * { /*background:yellow;*/ color:black; } #table-wrapper table thead th .text { position:absolute; top:-20px; z-index:2; height:20px; width:35%; border:1px solid red; } </style> <div id="table-wrapper"> <div id="table-scroll"> <table style="width: 615px; border: none; margin-right: auto; text-align: left; margin-left: auto;" border="1" cellspacing="0" cellpadding="0"> <!----------------------------- ADAPTIVE TABLE -------------------------------> <!------START------> <!----------------------------------------------------------------------------> <!----------------------------- ADAPTIVE TABLE -------------------------------> <!------END--------> <!----------------------------------------------------------------------------> </table> </div> </div>

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

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

Связанные записи
WordPressЮмор

Как сделать так, чтобы загрузка вашего WordPress сайта была действительно медленной (100% серьезный пост) 😂

Windows инструкцииWordPress

Как разделить большие файлы XML в WordPress

PageSpeed InsightsWordPressПлагины

Как отключить плагины WordPress на определенных страницах и постах с плагином и без (через функцию)

WordPressПлагины

Создать сайт членства с WordPress