Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 02.12.2022)
90090
осіб
280
літаків
262
гелікоптерів
2916
танків
5883
ББМ
1905
артилерія
210
ППО
395
РСЗВ
4464
машин
16
кораблі і катери
Як створити адаптивну таблицю в WordPress

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.