Оптимизация таблиц для просмотра на мобильных устройствах

Совсем недавно, а если быть точным – 2 февраля, подписчики блога Яндекса, получили письмо “Как быть мобильным”. В данном письме указано только два условия, по которым Яндекс считает страницы пригодными для мобильных устройств:

  • не должно быть горизонтальной прокрутки;
  • не должно быть элементов, которые не работают в популярных мобильных платформах.

Оптимизированные страницы для мобильных устройств по мнению Яндекса

И как же я был удивлен, обнаружив горизонтальную прокрутку на адаптивной версии сайта. Причиной появления прокрутки были таблицы, которые не помещались в экран мобильных устройств. Начал сёрфить инет в поиске решений. Потестил несколько из найденных решений. Каждый из методов имел как свои достоинства, так и недостатки. Оптимальным, как по мне, является решение, при котором ячейки таблиц просто смещаются друг под друга. Выглядит это следующим образом:

table

Стоит отметить, что каждая ячейка, которая является первой в строке имеет уникальный фон, что позволяет пользователям лучше вникать в содержимое таблиц.

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

А какой способ используете вы?


Будем признательны за каждый лайк:


Комментарии:

    • ApollonGuru
      ApollonGuru -  29.06.2016 - 23:26

      Данные необходимо добавлять в таблицу стилей css. Вам ли не знать)

      Ответить
  1. Ирина -  14.03.2017 - 17:35

    Большое спасибо, делаю качественные сайты на UCOZ, Ваше решение отлично подошло!

    Ответить
  2. Андрей -  21.03.2017 - 15:00

    Вау отлично? спасибо уважаемый? что старался для нас! Все быстро сделал и получилось, спасибо огромное.

    Ответить
  3. Людмила -  14.11.2017 - 07:53

    Олег, огромное спасибо! Очень долго не могла решить свою проблему по адаптации таблиц под мобильные устройства на сайтах wordpress, пыталась устанавливать плагины, даже тему вордпресс менять, но увы… ничего не помогало. У меня интернет магазин, а товары никак не хотели вставать по 1 в колонке – по 3 шт. в ряд и все тут! Теперь все красиво и за какие-то 3 минуты! Спасибо за помощь.

    Ответить

Оставьте комментарий, Ваше мнение очень важно для нас!

Введенный e-mail не будет виден другим пользователям :

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

Back to Top

Telegram

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

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

You have Successfully Subscribed!