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

Что такое поддомен (субдомен) и когда его использовать | SEO и примеры

Представьте, что ваш основной сайт – это большой дом, стоящий на вашем земельном участке (example.com).…

2 дня ago

Френк МакКинни Кин Хаббард

Есть два способа командовать женщиной, но никто их не знает Френк МакКинни Кин Хаббард  

4 дня ago

Роберт Шекли

Самое обидное, что в информационной войне всегда проигрывает тот, кто говорит правду, ведь он ограничен…

5 дней ago

Ричард Бах

Если тебе когда-нибудь захочется найти такого человека, который сможет одолеть любую, даже самую тяжелую беду…

6 дней ago

Что такое CDN и почему он нужен вашему сайту | обзор в 2025

Представьте себе, что вы открыли пиццерию в Киеве. Ваша пицца настолько вкусна, что ее хотят…

1 неделя ago

Что такое Varnish Cache и как он ускорит ваш сайт (начинающим)

Представьте, что ваш сайт – это большая библиотека, а ваш сервер – это главный библиотекарь.…

2 недели ago