Лучшие решения для создания адаптивных таблиц на движке wordpress: css, плагином и при помощи JS

В уроке разберём как создать адаптивные таблицы wordpress с помощью простого CSS, javascript и плагином. Проблема кроется в криво созданных темах, не поддерживающих сжатие, адаптивность. Вариантов два менять шаблон на более подходящий, или прописывать самому.

Адаптивные таблицы с помощью css кода

Любая таблица это набор HTML команд <table></table> начинают и закрывают, <tr> </tr> обозначение строки, <th><td> столбцы. Для понимания простая структура выглядит так:

<table>
<tr>
<th>заглавная строка -1</th>
<th>заглавная строка -2 </th>
<th>заглавная строка -3 </th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

А так выглядит на экране

С помощью css можно добиться крутых результатов, самый простой способ добавить в style.css такой код:

table {max-width:100%;}

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

Информация взята с официального репозитива бутстрапа.  Оборачиваем таблицу в:

<div class="table-responsive">здесь сам код, можно взять из примера выше</div>

А эту часть вставляем в любую свободную область в файле style.css

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

Вы также можете добавить фон ко всей таблице или ее отдельным строкам/ячейкам с помощью css цвета.

Например, задать фон для заголовков:

th {
    background: grey;
}

Но если статей много, и добавлять для каждой таблицы отдельный div становится сложно, то справиться JS. Так же можно почитать:

1. Полный обзор плагинов для создания таблиц
2. Плагины отзывов на wordpress
3. Делаем онлайн чат

JS для адаптивных таблиц wordpress

Чтобы одним разом сделать адаптивными все таблицы на сайте, необходимо применить функцию, или как принято называть хук. Записываем его в файл function.php перед закрывающим тегом ?> . Вот комбинация:

add_action( 'wp_footer', 'resp_tables' );
function resp_tables() {
   if ( is_singular() ) {
      ?>
      <script>
            jQuery(document).ready(function ($) {
                $('article table').wrap('<div class="table-resp"></div>');
            });
      </script>
      <style>
         @media screen and (max-width: 1035px) {
            .table-resp {
               width: 100%;
               overflow: auto;
               margin: 0 0 1em;
            }
         }
      </style>
      <?php
   }
}

И вставляем например сюда:

Теперь всё будет перезаписываться, и применять класс table-resp. Естественно, все манипуляции лучше производить через редакторы по FTP соединению. Если стало не понятно, предлагаю просмотреть видео ролик.

YouTube

С помощью плагина

Нашёл один достойный вариант плагин WP Responsive Table. Принудительно перезаписывает стили которые были до его установки, и добавляет собственные. Понравился минимализмом и наличием русского языка. Устанавливается стандартно, либо поиском или загрузкой с официального хранилища wordpress.

• Дополнительные настройки не требуются
• Не использует шорткоды, работает с любым редактором (с guttenberg тоже)
• Возможность сортировки столбцов
• Не увеличивает высоту
• Совершенно бесплатно

После установки во вкладке “внешний вид-настроить” появится новый пункт с одноимённым названием “настройки таблиц”. Зайдя, найдёте не большой функционал, которого хватит с головой для адаптации.

На скриншоте показаны не все параметры. Поэтому устанавливайте плагин если не хотите возиться с программированием. Он протестирован и обновляется регулярно, за безопасность можно не переживать.

Мы советуем использовать для нового сайта обёртывание в дополнительные теги, если ресурс старый то скрипт. В статье вы познакомились, научились делать адаптивные таблицы wordpress, если урок не понятен пишите нам.

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