Как сделать адаптивные таблицы в статьях WordPress?

Артем Абрамович

Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.

39 комментариев к “Как сделать адаптивные таблицы в статьях WordPress?”

  1. Вот это я попал в точку, как раз ломал с этим голову. Подписка .

    Ответить
  2. Доброго времени суток! Вопрос не к этому видео. Подскажите, пожалуйста, как вставить в wp плейлист с возможностью скачивания отдельных треков? Можно ли его вставить в сайдбар? Надеюсь на вашу помощь.

    Ответить
    • Ну что бы вставить плейлист, надо сначала терки загрузить. Поищите плагины по тегу audio, их должно быть много

      Ответить
  3. А вот у меня код не сработал. Более того, он выключил весь сайт. Использую тему tventyeleven, при вставлении кода в function.php сайт просто отключается. Где может быть проблема?

    Ответить
    • Значит вставили не верно. Проверьте, что и как вставляете. Может скобку забыли или еще что

      Ответить
    • Артём, трижды вставлял код адаптаблиц, всё согласно вашему мануалу, безо всяких отклонений, даже сверил правильность кода на сайте и на видео — не фурычет. Сайт просто уходит в даун, убираешь код — всё ровненько. Код копировал и его соответствие дважды сверял. Может проблема всё-таки в самой теме tventyeleven. Что думаете?

      Ответить
    • Тема tventyeleven. Вставляю в functions.php При том в функшионс уже вставлял коды и до этого и никаких проблем не имел. 100% уверен, что суть в самой теме ибо вставляешь код — сайт в дауне, убираешь — всё норм.

      Ответить
    • Сложно сказать, пробудет на другой теме вставлять. Поновее. Есть подозрения, что вставляете после тега ?>

      Ответить
    • WPRUSe · Финты WordPress
      А как проверить версию РНР? Решение я уже нашёл — инлайн стилями задал код работает. Просто теперь придётся постоянно инлайнами цеплять, ну тли действительно шкурку поменять.

      Ответить
    • Ну да, так проще всего. А версию можно посмотреть или через плагин соответствующий или на хостинге

      Ответить
    • ВП 4.9.4, а вот версию темы Tventyeleven сказать не берусь. Я года два назад я её закрыл от апдейтов, чтобы они дизайн не менялся автоматом.

      Ответить
    • И это тоже уже перепроверено — всё добавляется как и положено. Да хрен с ним, не заморачивайся, я всё равно в марте буду новую шкурку клепать и за основу возьму уже другой темплэйт. Вот на нём и попробуем.

      Ответить
  4. Здравствуйте, Артём. Подскажите, если не сложно, как человек сделал таблицу на этой странице https://seasonpub.com/movie/castle-rock/ Перебрала много плагинов, но все не то. Или какой-то конструктор?

    Ответить
    • Доброго! Помоему это плагин TablePress, он так умеет делать

      Ответить
  5. Здравствуйте. У меня тема shadow, код прописал, но ничего не изменилось, проверил на разных устройствах и сервисах. Скопировал все, разместил тоже в конце файла. Тема не очень новая…

    Ответить
    • @@wpruse Удалил кеш, поковырялся еще раз. При ширине экрана 375 пикселей, снизу появляется индикатор прокрутки таблицы. При ширине экрана 412 пикселей такого индикатора нет. Это все на небольших таблицах. А большая таблица, для которой на сайте задана 100% ширина, для нее нигде не появляется возможность прокрутки, в то же время на телефонах она выглядит обрезанной.

      Ответить
    • @@СергейМатусевич-ф9ф Видимо в теме как-то наверчены стили таблиц, это надо смотреть саму тему

      Ответить
    • @Сергей Матусевич Я нашел другой выход, заходите в браузере находите файл стилей который отвечает за таблицу, затем вставляете туда вот этот код:

      У меня файл стилей лежал тут: wp-includes/css/dist/block-library/style.min.css
      /*Таблица адаптив*/
      @media
      only screen and (max-width: 650px),
      (min-device-width: 650px) and (max-device-width: 650px) {

      /* Задаем табличным элементам свойства блоков*/
      table, thead, tbody, th, td, tr {
      display: block;
      }

      /* Скрываем заголовки таблицы */
      thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
      }

      tr { border: 1px solid #ccc; }

      td {
      /* Задаем ячейке свойства строки */
      border: none;
      width: 100%;
      position: relative;
      padding-left: 50%;
      }

      td:before {
      /* Передним ячейкам задаем свойства заголовка таблицы */
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      }

      /*
      Label the data
      */
      }

      Ответить
  6. Очень круто. Помог. Спасибо. Уже не первое видео смотрю с вашими разборами. Полезный материал делаете! Лайк и подписка

    Ответить
  7. Благодарю, отлично работает в мобильной адаптации темы OceanWP. Но вот попробовал мобильную версию через плагин WPtouch, таблицы так не прокручиваются. Подскажи, как можно исправить?

    Ответить

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

%d такие блоггеры, как: