Как создать адаптивные таблицы в WordPress

Вы добавили на WordPress-сайт таблицу, а она неудобно отображается для ваших посетителей? Разберем рабочие методы, которые сделают таблицу адаптивной для корректного просмотра на любом устройстве.

Как WordPress отображает таблицы?

Это зависит от темы. Табличные данные будут отображаться в соответствии с правилами CSS, включенными в тему. Если переключить тему, отображения таблиц будет меняться.

Некоторые темы “умеют” адаптировать ячейки таблицы на любом устройстве. В итоге пользователь увидит все ее содержимое без прокрутки.

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

Для чего нужна адаптивность таблицы?

Для примера создадим простую табличку.

<table>
<caption>Самые популярные IT-компании в 2020 году.</caption>
<thead>
<tr>
    <th>Компания</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
    <th>Q5</th>
    <th>Q6</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Microsoft</td>
    <td>20.3</td>
    <td>30.5</td>
    <td>23.5</td>
    <td>40.3</td>
    <td>45.23</td>
    <td>39.3</td>
</tr>
<tr>
    <td>Google</td>
    <td>50.2</td>
    <td>40.63</td>
    <td>45.23</td>
    <td>39.3</td>
    <td>23.5</td>
    <td>40.3</td>
</tr>
<tr>
    <td>Apple</td>
    <td>25.4</td>
    <td>30.2</td>
    <td>33.3</td>
    <td>36.7</td>
    <td>22.3</td>
    <td>29.3</td>
</tr>
<tr>
    <td>IBM</td>
    <td>20.4</td>
    <td>15.6</td>
    <td>22.3</td>
    <td>29.3</td>
    <td>33.3</td>
    <td>36.7</td>
</tr>
</tbody>
</table>

На сайте она выглядит так:

Таблица на сайте

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

Таблица на мобильной версии сайта

Видно, что пользователь увидит только те ячейки, которые помещаются в пределах экрана. Чтобы посмотреть остальные, нужно использовать горизонтальную прокрутку. На телефоне или планшете это неудобно.

Как в ВордПресс сделать таблицу адаптивной?

Есть 2 способа. Первый – это использовать плагины, которые сами добавляют нужные стили. Второй – вручную прописать правила вывода табличных данных на мобильных устройствах. Разберем оба метода.

Способ 1. Адаптивность с помощью плагина

Этот метод простой и рекомендуется использовать новичкам.

В каталоге ВП есть несколько бесплатных решений, которые на автомате добавляют адаптивность таблицам.

Magic Liquidizer Responsive Table

Плагин не требует каких-либо настроек и работает после установки. Наша таблица на мобильных будет такой:

Адаптивная таблица с помощью плагина Magic Liquidizer Responsive Table

Automatic Responsive Tables

Это WP-дополнение тоже не нужно настраивать. В итоге:

Адаптивная таблица с помощью плагина Automatic Responsive Tables

Попробуйте оба плагина и выберите тот, который подходит для ваших таблиц.

Способ 2. Адаптивность с помощью кода

Все последующие действия предполагают редактирование functions.php — основного конфигурационного файла WordPress-темы. Если вы не знаете, как редактировать этот файл, то в этом случае поможет плагин ProFunctions.

Откройте functions.php и в самый его конец добавьте код:

function wpschool_adaptive_tables_css() {
    if ( is_single() || is_page() ) {
        echo '<style type="text/css">
              @media screen and (max-width: 600px) {table {width:100%;} thead {display: none;} tr:nth-of-type(2n) {background-color: inherit;} tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} tbody td {display: block; text-align:center;} tbody td:before {content: attr(data-th);display: block; text-align:center;}}
        </style>';
    }
}

function wpschool_adaptive_tables_script() {
    if ( is_single() || is_page() ) {
        echo '<script type="text/javascript">
              var headertext = [];
              var headers = document.querySelectorAll("thead");
              var tablebody = document.querySelectorAll("tbody");
              for (var i = 0; i < headers.length; i++) {
                  headertext[i]=[];
                  for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
                      var current = headrow;
                      headertext[i].push(current.textContent);
                  }
              }
              for (var h = 0, tbody; tbody = tablebody[h]; h++) {
              for (var i = 0, row; row = tbody.rows[i]; i++) {
              for (var j = 0, col; col = row.cells[j]; j++) {
                  col.setAttribute("data-th", headertext[h][j]);
              }}}
        </script>';
    }
}
add_action( 'wp_head', 'wpschool_adaptive_tables_css' );
add_action( 'wp_footer', 'wpschool_adaptive_tables_script' );

Результат работы кода зависит от структуры таблицы.

Адаптивная таблица с помощью произвольного кода

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

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Задать вопрос