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

 

Recent Posts

Порівняння цін із конкурентами: навіщо це потрібно інтернет-магазину

Зміст статті Вступ: чому ціни вирішують все Що означає порівняння цін із конкурентами 5 причин,…

4 дні ago

Найкращі сауни Києва: перевірені адреси та актуальні ціни

Останніми роками інтерес до саун у Києві помітно зріс. Це пов'язано не лише з модою…

5 днів ago

Швидкий гід по лазнях та саунах Києва

У сучасному ритмі мегаполісу відпочинок став невід'ємною частиною турботи про здоров'я та емоційний стан. Особливо…

6 днів ago

Рекламний акаунт Facebook: Як отримати максимум від реклами

У сучасному світі цифрового маркетингу Facebook (Meta) залишається однією з найпотужніших платформ для просування бізнесу.…

1 тиждень ago

Тактичний тепловізор: призначення, особливості та переваги

Цей прилад став незамінним елементом арсеналу представників безлічі професій, але особливо актуальним серед військових. Тепловізор…

2 тижні ago

Як книги для саморозвитку допомагають “закрити зайві думки” і почати жити тут і зараз

Постійний потік новин, робочих завдань і особистих турбот часто призводить до того, що в голові…

2 тижні ago