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

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

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

Стили такие

@media screen and (max-width: 1035px) { // на всех экранах шириной до 1035 пикселей
        .table-cover {
		width: 100%;
		overflow: auto;
		margin: 0 0 1em;
	}
}

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

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

add_action( 'wp_footer', 'art_responsive_tables' );
function art_responsive_tables() {
   if ( is_singular() ) {
      ?>
      <script>
            jQuery(document).ready(function ($) {
                $('article table').wrap('<div class="table-cover"></div>');
            });
      </script>
      <style>
         @media screen and (max-width: 1035px) {
            .table-cover {
               width: 100%;
               overflow: auto;
               margin: 0 0 1em;
            }
         }
      </style>
      <?php
   }
}

Код пихать в файл 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