Адаптивные таблицы

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

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

Стили такие

Все просто — на нужных размерах как бы обрезаем таблицу.

Но что если у вас уже много страниц с таблицами и оборачивать каждую таблицу — не вариант? Тогда можно использовать такое решение

Код пихать в файл fuctions.php. Если вдруг что-то не работает, проверяйте теги. Код проверен на нескольких темах и все должно работать сразу.

Всем успехов!

5 комментариев
  • Виталик

    17.09.2017

    Добрый день. Возник следующий вопрос.
    На главной странице сайта по СТАНДАРТУ должны быть расположены:
    1. h1 — заголовок сайта
    2. h2 — заголовки записей.
    3. h3 — ?

    Начну сразу с примера. Ссылка в профиле.
    На сайте располагается:

    1. h1 — заголовок сайта.
    2. h2 — заголовки записей.
    3. h3 — заголовки виджетов.

    Так вот в чем собственно вопрос и состоит.
    В иерархии, как правило h1-h6 должны располагаться по степени значимости, но на сайте идет расположение

    h1 — заголовок сайта (высокочастотный запрос) — «травма».
    h2 — заголовок записи (малочастотный запрос) — «как лечить ожог?».
    h3 — заголовок виджета (среднечастотный запрос) — «ожог».

    То есть я вот что хочу спросить, делать ли мне заголовки виджетов на h2, а заголовки записей на h3. И как это повлияет на поисковую оптимизацию?
    С уважением, Виталий.

    • Артем

      01.10.2017

      Доброго! Как это на поиск повлияет, не знаю, но смысла использовать заголовки в вижетах нет никакого, так как при правильной верстке в сайдбаре используется тег aside, которые поисковики игнорируруют и все что внутри него находится индексируется в последнюю очередь

  • Мария

    30.10.2017

    Добрый день, Артем! Есть ли необходимость в данном решении для темы Storefront или там уже это реализовано ?
    И еще в этой теме в таблицах автоматически меняется регистр со строчных букв на ПРОПИСНЫЕ. Как можно это убрать? Все версии установлены самые свежие.

    • Артем

      06.11.2017

      Доброго! Нет, в этой теме можно не делать такое, там, на сколько помню, уже нормально сделано. Регистр букв меняется стилями

      • Мария

        07.11.2017

        В Storefront в мобильной версии большие таблицы не влезают в область просмотра, а горизонтальная линейка прокрутки в браузере не появляется. Установка в body { overflow-x:scroll; } не дает результата. Не подскажете как можно еще сделать чтобы прокрутка появлялась в мобильном варианте?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *
php js HTML CSS Code

Подписывайся!

Подписывайся!

Подписывайтесь на новости сайта, чтобы ничего не пропустить

Спасибо, что подписались!