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

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

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

 

 

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

 

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

Существует два способа создания адаптивной таблицы: вручную, с использованием HTML и CSS, и с помощью плагинов. В данной статье мы рассмотрим только ручной способ, поскольку он довольно прост и не требует дополнительной установки плагинов.

Самый простой способ добиться адаптивности таблицы – это сделать ее прокручиваемой. Прокрутка является приемлемым методом, позволяющим сохранять читаемость таблицы, когда она остается в пределах экрана. Мы добьемся этого с помощью небольших правок в HTML коде и CSS.

 

Когда вы будете создавать таблицу, добавьте определенный класс тегу table (при редактировании статьи, либо страницы, на вкладке «Текст»). Например, так:

<table class="adaptive-table">
  ...
</table>

 

Для этого класса (adaptive-table) мы добавим небольшой кусок правил в файле CSS стилей. Откройте файл CSS стилей в активной теме (style.css). Это можно сделать по FTP, либо в Консоли перейдите в Внешний вид -> Редактор -> Таблица стилей.

Вставьте этот код в файл style.css:

@media only screen and (max-width: 720px) {
 table.adaptive-table {
  margin-bottom: 0;
  overflow: hidden;
  overflow-x: scroll;
  display: block;
  white-space: nowrap;
 }
}

 

Укажите нужную ширину для медиа-запроса (в нашем примере это 720 пикселей), при которой эти правила будут задействованы.

Данный код добавляет прокрутку для таблицы, когда ширина экрана не больше 720 пикселей и таблица выступает за рамки экрана. Это решение позволяет прокручивать таблицу в окне устройства, а весь остальной макет страницы остается на месте.

Чтобы проверить то, как адаптивная таблица отображается на девайсах с разной шириной экрана, вы можете воспользоваться инструментом для разработчиков в браузере Google Chrome. Нажмите в браузере F12, а затем выберите Toggle device toolbar (Панель переключателя устройств) в меню. Либо нажмите сочетание клавиш Ctrl+Shift+M, чтобы сразу запустить инструмент проверки отображения сайта на различных мобильных устройствах.

 

 

Если вас не пугает работа с HTML-кодом и правки CSS-стилей, тогда решение из данного урока вам подойдет. В противном случае, воспользуйтесь соответствующим плагином из репозитория WordPress.

 

View Comments

  • Огонь статейка, как раз вовремя :)

Recent Posts

Использование запросов WP_Query в WordPress — часть 3 (основные функции класса)

Этот урок является продолжением серии о работе с запросами в базу данных WP_Query в ВордПресс.…

1 день ago

Григорий Сковорода

Как лекарство не всегда приятно, так и истина бывает сурова Григорий Сковорода  

4 дня ago

Использование запросов WP_Query в WordPress – часть 2 (обзор цикла)

Этот урок является продолжением серии о работе с запросами к базе данных WP_Query в ВордПресс.…

5 дней ago

5 плагинов, которые сделают ваш WordPress-сайт идеальным в 2025 году

Без плагинов WordPress – просто чистый лист. Чтобы сайт работал быстро, был безопасным и привлекательным,…

6 дней ago

Использование запросов WP_Query в WordPress в теории и примерах — часть 1 (введение)

Класс WP_Query — это мощный инструмент, с помощью которого можно максимально контролировать отправку запросов к…

1 неделя ago

Марк Аврелий

Твои мысли становятся твоей жизнью Марк Аврелий  

1 неделя ago