Вы добавили на 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
Плагин не требует каких-либо настроек и работает после установки. Наша таблица на мобильных будет такой:
Automatic Responsive Tables
Это WP-дополнение тоже не нужно настраивать. В итоге:
Попробуйте оба плагина и выберите тот, который подходит для ваших таблиц.
Способ 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' );
Результат работы кода зависит от структуры таблицы.
Ещё читайте: Что такое пиксели, или px – это?
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.