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

Преміум та безкоштовні WordPress шаблони: що варто обрати саме вам?

Коли мова заходить про вибір ідеальної платформи для побудови сайту, багато людей, перш за все,… Read More

02/06/2021

Ошо

Вже пізно повертати назад, щоб все правильно почати, але ще не пізно рушити вперед, щоб… Read More

23/05/2021

Шпаргалка по часовим формам дієслова в англійській мові

В англійській мові дуже складна система часів (часові форми дієслова – Verb Tenses), яка відноситься… Read More

17/05/2021

Теорія кольору – поради для натхнення веб-дизайнерам

Ви коли-небудь замислювалися про те, як веб-дизайнери підбирають ідеальне поєднання кольорів? Цікавилися тим, які кольори… Read More

30/04/2021

Як стати фрілансером – дієві поради

Фріланс – це можливість спокійно і розмірено працювати вдома, не звертаючи увагу на навколишній простір,… Read More

27/04/2021

Найкрасивіші каньйони з усього світу (частина 1/2)

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

27/04/2021