Оптимізація таблиць для перегляду на мобільних пристроях

Оптимізація таблиць для перегляду на мобільних пристроях

Нещодавно, а якщо бути точним – 2 лютого, передплатники блогу Яндекса, отримали лист «Як бути мобільним». У цьому листі зазначено лише дві умови, за якими Яндекс вважає сторінки придатними для мобільних пристроїв:

  • не повинно бути горизонтального прокручування;
  • не повинно бути елементів, які не працюють у популярних мобільних платформах.

Оптимізовані сторінки для мобільних пристроїв на думку Яндекса
І як же я був здивований, виявивши горизонтальне прокручування на адаптивній версії сайту. Причиною появи прокручування були таблиці, які не поміщаються на екрані мобільних пристроїв. Почав серфити інет у пошуку рішень. Потестив кілька знайдених варіантів. Кожен із методів мав як свої переваги, так і недоліки. Оптимальним, як на мене, є рішення, при якому клітинки таблиць просто зміщуються одна під одну. Виглядає це так:

Варіант оптимізації таблиці для перегляду на мобільному пристрої

Варто зазначити, що кожна клітинка, яка є першою у рядку, має унікальний фон, що дозволяє користувачам краще вникати у вміст таблиць.

Для реалізації такого виду адаптивності таблиць необхідно додати наступний код у таблицю стилів:

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tr th:first-child {font-weight:bold;font-size:1.3em;}
tbody td, tbody th {display: block; text-align:center;}
tbody td, tbody th:before {
content: attr(data-th);
display: block;
text-align:center;
}
}

А який спосіб використовуєте ви?


Будемо вдячні за кожен лайк:

Залишіть коментар, Ваша думка дуже важлива для нас!
Введений e-mail не буде видно іншим користувачам:

Просимо ознайомитись з політикою конфіденційності и угодою про використання файлів cookie перед початком використання сайту.

Back to Top

Telegram

Подписывайтесь на наш канал в Telegram, будьте лучше ваших конкурентов

Подпишитесь на наш канал

You have Successfully Subscribed!