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

Порівняння маркетингу та нейромаркетингу – переваги і недоліки

Нейромаркетинг – нова наука, яка ламає стандарти традиційних маркетингових досліджень і пропонує абсолютно дивовижні способи… Read More

10/10/2020

Що таке хостинг і як його правильно вибрати для свого сайту, щоб не втратити гроші на простоях

На хостингу живуть сайти, це їх місце в Інтернеті. Якщо простими словами, то хостинг представляє… Read More

07/10/2020

Ознаки якісного хостингу: обираємо з розумом

Хостингом називається спеціальний простір, що призначений для зберігання файлів веб-сайту. Клієнтам доступні різні типи розміщення… Read More

30/09/2020

Як вивчити німецьку мову легко і весело? З допомогою Beste Freunde!

Німецька часто вважається складною мовою. Так, німецька лексика має «важкий» характер. Так, є дійсно дуже… Read More

27/09/2020

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Інструкція по завантаженню відео з сервісу TikTok (безкоштовно та без watermark)

Якщо ви ще не чули про TikTok, тоді рекомендуємо вам спочатку ознайомитися з цим коротким… Read More

17/09/2020