Как создать адаптивную таблицу с горизонтальной прокруткой в ​​Divi

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

В этом уроке мы покажем вам, как использовать Divi для создания полностью настраиваемой таблицы с горизонтальной прокруткой. Мы покажем вам, как добавить функцию горизонтальной прокрутки к столбцам, которые переполняют контейнер таблицы. Кроме того, мы даже добавим в таблицу несколько кнопок горизонтальной прокрутки, чтобы улучшить UX. Все это без плагина!

Давайте начнем.

Sneak Peek

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

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание адаптивной таблицы с горизонтальной прокруткой

Часть 1. Построение столбцов таблицы

Для этого дизайна таблицы мы собираемся создать столбцы таблицы, используя строки. Для этого мы будем использовать свойство flex (настраиваемый CSS), чтобы выровнять строки по горизонтали, как столбцы.

Обновить настройки раздела

Перед добавлением строки откройте настройки раздела обычного раздела по умолчанию и добавьте следующий настраиваемый CSS в основной элемент:

display:flex;
overflow-y:scroll !important;

Это заставит горизонтальное переполнение раздела иметь функцию прокрутки, а также даст нам свойство flex, необходимое для организации наших строк по горизонтали, а не по вертикали.

Добавить ряд

Теперь, когда CSS раздела находится на месте, создайте в разделе строку из одного столбца.

Настройки строки

Откройте настройки строки и обновите следующее:

• Ширина желоба: 1
• Ширина: 100%

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

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

• Ширина правой границы: 1 пикс.
• Цвет правой границы: #cccccc

Затем обновите отступ:

• Padding: 0px сверху, 0px снизу

На вкладке «Дополнительно» присвойте строке настраиваемый класс CSS следующим образом:

• Класс CSS: et-scroll-table-column

Нам это понадобится позже для кастомного кода.

Создание элементов таблицы с текстовыми модулями

Чтобы создать элементы таблицы в каждой строке (или столбце таблицы), мы собираемся использовать текстовые модули.

Добавить текстовый модуль

Текстовый контент

Затем добавьте текст «Элемент таблицы» к основному содержимому текстового модуля.

Текстовый Дизайн

На вкладке дизайна обновите следующее:

• Выравнивание текста: по центру
• Высота: 80 пикселей

• Ширина правой границы: 1 пикс.
• Цвет нижней границы: #cccccc

Эта граница будет соответствовать правой границе строки.

Текстовый CSS

Чтобы текст в модуле оставался по центру по вертикали и горизонтали, добавьте следующий CSS-код в основной элемент на вкладке «Дополнительно»:

display:flex;
align-items:center;
justify-content: center;

Модуль дублирования текста для других элементов таблицы

Теперь, когда создан наш первый элемент таблицы, продублируйте текстовый модуль (столько раз, сколько необходимо), чтобы создать дополнительные элементы таблицы в строке.

Создание заголовка столбца таблицы

Нам нужно превратить самый верхний текстовый модуль в заголовок столбца таблицы. Для этого откройте настройки верхнего текстового модуля, обновите метку в представлении «Слои» на «Заголовок» и добавьте текст «Заголовок» с основным содержимым.

Затем обновите цвет фона.

• Фон: # 333333

И обновите оформление текста следующим образом:

• Толщина шрифта текста: полужирный
• Стиль шрифта текста: TT
• Цвет текста текста: #ffffff

Дублируйте строку для большего количества столбцов таблицы

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

Часть 2: Создание прикрепленного столбца таблицы с вертикальными заголовками

Крайняя левая строка (или первая строка) будет служить вертикальными заголовками для нашей таблицы. Во-первых, нам нужно обновить фон строки и каждый из текстовых модулей, чтобы они имели тот же дизайн, что и заголовки в верхней части каждого столбца. Затем мы собираемся сделать всю строку «липкой», чтобы она оставалась на месте, когда пользователь прокручивает по горизонтали для просмотра скрытых столбцов таблицы.

Обновить фон строки

Для этого откройте настройки для первой строки и обновите цвет фона:

• Цвет фона: # 333333

Обновить текстовые модули

Затем откройте настройки для верхнего текстового модуля, содержащего заголовок. Щелкните правой кнопкой мыши группу параметров текста и выберите «Расширить стили текста». Во всплывающем окне «Расширить стили» выберите распространение стилей текста на все тексты в этом столбце . Затем нажмите кнопку «Расширить».

Затем выберите несколько раз все текстовые модули в строке (удерживая ctrl (или cmd) и щелкните каждый из них) и обновите содержимое основного текста текстом «Заголовок».

Добавить логотип

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

Откройте настройки для самого верхнего текстового модуля в первой строке.

Затем удалите основной текст.

Затем добавьте логотип (убедитесь, что он размером примерно 40 на 40 пикселей) в качестве фонового изображения. Убедитесь, что для размера фонового изображения установлено значение «Фактический размер».

Делаем вертикальные строки заголовков липкими

Чтобы сделать строку липкой, добавьте следующий настраиваемый CSS к основному элементу:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(Вы можете игнорировать любые ошибки кода, которые будут отображаться, используя свойство sticky.)

Чтобы закрепленная строка оставалась видимой над другими строками, обновите индекс Z:

• Индекс Z: 13

Часть 3: Обновление раздела таблицы

Теперь, когда все элементы таблицы находятся на своих местах, мы можем обновить раздел (контейнер таблицы) с определенным размером и переполнением.

Откройте настройки раздела и добавьте цвет фона:

• Цвет фона: #ffeaef

Затем обновите размер и интервал следующим образом:

• Ширина: 100%
• Максимальная ширина: 900 пикселей
• Маржа: 10vh сверху
• Padding: 0px сверху, 0px снизу

Затем добавьте следующий класс CSS:

• Класс CSS: et-scroll-table

И обновите переполнение:

• Горизонтальное переполнение: прокрутка
• Вертикальный перелив: скрытый

(Примечание: у нас уже есть «переполнение: прокрутка», добавленное в раздел в качестве настраиваемого CSS, так что функциональность прокрутки будет действовать и в визуальном построителе.)

Часть 4: Добавление кнопок горизонтальной прокрутки

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

Добавить раздел

Для этого создайте новый регулярный раздел.

Откройте настройки раздела и удалите отступы по умолчанию:

• Padding: 0px сверху, 0px снизу

Добавить ряд

Сделайте раздел строкой в ​​одну колонку.

И обновите настройки строки следующим образом:

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 900 пикселей
• Отступ: 10 пикселей сверху, 10 пикселей снизу, 10 пикселей справа

Создайте левую кнопку прокрутки

Чтобы создать левую кнопку прокрутки, добавьте модуль рекламного сообщения в столбец / строку.

Удалите заголовок и содержимое тела по умолчанию и добавьте значок стрелки влево.

На вкладке дизайна обновите следующее:

• Цвет значка: # 333333
• Выравнивание изображения / значка: по центру
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 40 пикселей
• Ширина содержимого: 100%
• Ширина: 50 пикселей

Затем дайте рекламному объявлению класс CSS:

• Класс CSS: et-scroll-left

Это необходимо для добавления функции прокрутки при щелчке к рекламному сообщению / кнопке с нашим кодом позже.

Создайте правую кнопку прокрутки

Чтобы создать правую кнопку прокрутки, продублируйте рекламное объявление и обновите значок стрелкой вправо.

Затем обновите класс CSS:

• Класс CSS: et-scroll-right

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

display:flex;
justify-content:flex-end;

Часть 5: Добавление собственного кода

В заключительной части этого руководства нам нужно добавить CSS, необходимый для установки минимальной ширины для строк (которые на самом деле являются столбцами нашей таблицы), и код JS, необходимый для добавления функциональности прокрутки к кнопкам.

Чтобы добавить код, добавьте модуль кода под вторым рекламным объявлением.

В поле кода вставьте следующий CSS, убедившись, что код заключен в необходимые теги стиля .

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

Под кодом CSS вставьте следующий jQuery, обернув код необходимыми тегами сценария .

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

Обновление ширины столбца

Если вы хотите обновить минимальную ширину каждого из столбцов таблицы, вы можете изменить значение минимальной ширины в CSS.

Обновление количества столбцов при прокрутке

В настоящее время при нажатии кнопок выполняется прокрутка по горизонтали (влево или вправо) на расстояние, равное ширине двух столбцов. Чтобы изменить количество столбцов при прокрутке, обновите крайнее правое число (в настоящее время число 2) в значении переменной scrollByColumnNumber .

Добавление чередующихся цветов столбцов

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

Конечный результат

А теперь посмотрим на окончательный результат!

Вот окончательный дизайн стола на рабочем столе.

А вот и функция горизонтальной прокрутки на настольных компьютерах и мобильных устройствах.

Последние мысли

Независимо от того, как далеко мы продвинулись в мире веб-дизайна, кажется, что у таблиц всегда есть свое место. Они продолжают предоставлять ценное решение для организации контента понятным пользователям образом. Эта таблица с горизонтальной прокруткой может пригодиться в большом количестве случаев использования. И, пожалуй, самое лучшее, что вы можете обновлять содержимое таблицы (с помощью встроенного встроенного редактора Divi) и стилизовать таблицу бесчисленными творческими способами с помощью визуального конструктора.

Для получения дополнительной информации о создании адаптивных таблиц в WordPress ознакомьтесь с нашим сообщением «Как создать адаптивные таблицы в WordPress».

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!