Как сделать адаптивный стол в Элементоре (3 способа)

Ключевые выводы

• В адаптивной таблице Elementor используется один из трех шаблонов на телефонах: ряды, сложенные в карты, боковой прокруток внутри собственной коробки стола или меньшее количество столбцов.
• Для того чтобы таблица из пяти столбцов оставалась читаемой, требуется ширина около 640px, а большинство телефонов показывают от 360px до 430px, поэтому широкая таблица переполняется, если вы не выбираете шаблон.
• Виджет динамической таблицы Master Addons складывает каждую строку в карту на устройствах шириной до 768px, когда адаптивная таблица? включен, что является стандартом по умолчанию.
• Горизонтальная прокрутка принимает два правила CSS: exuplough-x, настроенный на автоматическое использование обертки, и минимальную ширину стола внутри нее.
• В настройках каждой таблицы установлен флажок Горизонтальная прокрутка, он по умолчанию выключен.

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

Есть три способа справиться с ним. мы построили все три на Elementor 4.3 и проверили их на экране телефона шириной 390px.

Почему столы ломаются на мобильном телефоне

Стол не может обернуть свои столбцы так, как может ряд контейнеров Elementor.Каждый столбец должен сидеть рядом с другими, и каждому нужно место для самого длинного слова.Наш стол для доставки с пятью столбцами удобен примерно на 640px. На телефоне с разрешением 390px браузер сжимает столбцы, пока слова не сложат три строки в глубину, а затем последний столбец падает с края.

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

Три адаптивных шаблона таблиц

Каждый шаблон имеет стоимость.

Шаблон 1: Сложите ряды в карты

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

выше Динамическая таблица виджет делает это с помощью одного переключателя.

1. Выберите виджет "Динамическая таблица" в Elementor.
2. Во вкладке Содержимое откройте Настройки.
3. Уходить Адаптивный стол? установить на Да. Он включен по умолчанию.
4. Открыть страницу на телефоне.Стек строк на устройствах шириной до 768px.

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

Хотите таблицу, которая стекается без CSS? выше Виджет динамической таблицы включите адаптивную таблицу с самого начала.

Шаблон 2: Горизонтальный свиток

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

Для HTML-таблицы в HTML-виджете Elementor оберните таблицу в div и добавьте два правила:

<div class="table-scroll">
  <table class="wide-table">
    ...
  </table>
</div>

<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>

выше min-width не дает браузеру смять столбцы, и overflow-x: auto добавляет прокрутку только тогда, когда экран уже, чем это Измените 640px на любую ширину, которая необходима вашей таблице, чтобы оставаться на одной строке на ячейку.

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

Шаблон 3: Скрыть столбцы

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

Добавьте класс к каждому th и td в столбцах вы можете проиграть, а затем спрятать этот класс на маленьких экранах:

<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>

<style>
@media (max-width: 767px) {
  .hide-cols .hide-mobile { display: none; }
}
</style>

Здесь hide-cols является классом на самой таблице.767px является мобильной точкой останова Elementor по умолчанию, поэтому столбцы возвращаются на планшетах.

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

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

Таблица TablePress, помещенная в Elementor, ведет себя как любая другая таблица: широкие переполнены. исправление живет в настройках TablePress.

1. Перейти к СтолПресса и отредактировать таблицу.
2. Прокрутить до Особенности таблицы для посетителей сайта.
3. Тик Горизонтальная прокрутка. Он выключен по умолчанию.
4. Нажмите Сохранить изменения.

В нашем тесте это исправило переполнение: таблица прокручивалась внутри своего поля, а страница оставалась неподвижной. TablePress также имеет режимы укладки и свертывания для телефонов, и они являются частью его платной функции "Отзывчивые таблицы".

Быстрый мобильный контрольный список

• Откройте страницу на реальном телефоне Эмуляторы пропускают сенсорную прокрутку и некоторые правила ширины устройства.
• Прокрутите страницу вбок. Если вся страница движется, таблица переполнена.
• Сохраняйте текст заголовка коротким. “Free over” обертывания лучше, чем “Бесплатная доставка по заказам over”.
• Поставьте на первое место самый важный столбец Это тот, который остается видимым, когда таблица прокручивается.
• Цельтесь в текст тела 16px в ячейках.Сокращение шрифта для соответствия таблице делает его нечитаемым.

Часто задаваемые вопросы

Заключительные мысли

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

Если вы предпочитаете не писать CSS, Динамическая таблица обрабатывает рисунок штабелирования с переключателя на панели.

Связанное чтение

• Как создать таблицу в Elementor (4 способа)
• Лучшие плагины и виджеты таблиц Elementor по сравнению
• Пользовательское расширение CSS для Elementor