Как создать адаптивную таблицу в 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.

Tags: WordPress

Recent Posts

Как выучить немецкий язык легко и весело? С помощью Beste Freunde!

Немецкий часто считается сложным языком. Да, немецкая лексика имеет «тяжелый» характер. Да, есть действительно очень… Read More

27/09/2020

Отопление и горячая вода – когда нужно, а не когда соизволят включить

Тепло в доме и горячая вода в любое время для многих жителей многоквартирных и частных… Read More

19/09/2020

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020