Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 21.05.2022)
28850
осіб
204
літаків
169
гелікоптерів
1278
танків
3116
ББМ
596
артилерія
93
ППО
201
РСЗВ
2178
машин
13
кораблі і катери
Як створити адаптивну таблицю в 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.

 

 

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

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