如何在 Divi 中创建带有水平滚动的响应表

创建响应式表可能是一个挑战，尤其是当您有一个包含很多列的表时。 解决这个问题的一个好方法是向表格添加水平滚动功能。 具有水平滚动的表格解决了两个主要问题。 首先，它允许设计者保持表格内容所需的间距（非常窄的列会导致内容过多地混在一起）。 其次，它允许用户在移动设备上查看易于阅读的表格内容。

在本教程中，我们将向您展示如何使用 Divi 构建一个完全自定义的水平滚动表。 我们将向您展示如何向溢出表容器的列添加水平滚动功能。 此外，我们甚至会向表格添加一些水平滚动按钮以提升 UX。 所有这一切都没有插件！

让我们开始吧。

抢先看

这是我们将在本教程中构建的带有水平滚动的响应式表格的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

使用水平滚动构建响应式表格

第 1 部分：构建表列

对于此表设计，我们将使用行创建表列。 为此，我们将使用 flex 属性（自定义 CSS）来像列一样水平对齐行。

更新部分设置

在添加一行之前，打开默认常规部分的部分设置，并在主元素中添加以下自定义CSS：

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

这将强制该部分的水平溢出具有滚动功能，并为我们提供水平而不是垂直组织行所需的 flex 属性。

添加行

既然部分 CSS 已就位，请在该部分中创建一个单列行。

行设置

打开行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%

这将确保我们的表格列在我们将为表格项目添加的文本模块之间没有任何额外的边距。

然后给该行一个右边框，如下所示：

• 右边框宽度：1px
• 右边框颜色：#cccccc

然后更新填充：

• 填充：0px 顶部，0px 底部

在高级选项卡下，为该行指定一个自定义 CSS 类，如下所示：

• CSS 类：et-scroll-table-column

稍后我们将需要它用于自定义代码。

使用文本模块创建表格项目

为了在每一行（或表格列）中创建表格项目，我们将使用文本模块。

添加文本模块

文字内容

接下来，将文本“Table Item”添加到文本模块的正文内容中。

文字设计

在设计选项卡下，更新以下内容：

• 文本对齐：居中
• 高度：80px

• 右边框宽度：1px
• 底部边框颜色：#cccccc

此边框将匹配行的右边框。

文本 CSS

要确保模块内的文本保持垂直和水平居中，请将以下 CSS 添加到高级选项卡下的主元素：

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

用于更多表格项目的复制文本模块

现在我们的第一个表项已经创建，复制文本模块（根据需要多次）以在行内创建其他表项。

创建表格列的标题

我们需要将最顶部的文本模块转换为表格列的标题。 为此，打开顶部文本模块的设置，将图层视图中的标签更新为“标题”，然后将文本“标题”与正文内容一起添加。

然后更新背景颜色。

• 背景：#333333

并更新文字的设计如下：

• 文字字体粗细：粗体
• 文字字体样式：TT
• 文字文字颜色：#ffffff

复制更多表格列的行

现在第一行已完成，我们可以复制该行以根据表的需要创建尽可能多的表列。 对于此设计，我们将复制该行八次以创建总共九行。

第 2 部分：设计带有垂直标题的粘性表格列

最左边的行（或第一行）将作为我们表格的垂直标题。 首先，我们需要更新行背景和每个文本模块，使它们与每列顶部的标题具有相同的设计。 然后，我们将使整行具有粘性，以便在用户水平滚动以查看隐藏的表格列时保持原位。

更新行背景

为此，请打开第一行的设置并更新背景颜色：

• 背景颜色：#333333

更新文本模块

然后，打开包含标题的顶部文本模块的设置。 右键单击文本选项组并选择扩展文本样式。 在“扩展样式”弹出窗口中，选择将文本的样式扩展到此列中的所有文本。 然后单击扩展按钮。

然后多选该行中的所有文本模块（按住 ctrl（或 cmd）并单击每个模块）并使用文本“标题”更新正文内容。

添加徽标

由于我们不需要此列中最顶部的标题，因此我们将在表格中添加一个徽标。

打开第一行中最顶部文本模块的设置。

然后删除正文。

然后添加徽标（确保它大约为 40 像素 x 40 像素）作为背景图像。 确保背景图像大小设置为“实际大小”。

使垂直标题行具有粘性

要使行具有粘性，请将以下自定义 CSS 添加到主元素：

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

（您可以忽略使用粘性属性显示的任何代码错误。）

要确保粘性行在其他行上方保持可见，请更新 Z 索引：

• Z指数：13

第 3 部分：更新表的部分

现在表格元素都已就位，我们可以使用特定大小和溢出更新节（表格容器）。

打开部分设置并添加背景颜色：

• 背景颜色：#ffeaef

然后更新尺寸和间距如下：

• 宽度：100%
• 最大宽度：900px
• 边距：10vh 顶部
• 填充：0px 顶部，0px 底部

然后添加以下 CSS 类：

• CSS 类：et-scroll-table

并更新溢出：

• 水平溢出：滚动
• 垂直溢出：隐藏

（注意：我们已经将“overflow:scroll”作为自定义 CSS 添加到该部分，以便滚动功能也将在可视化构建器上生效。）

第 4 部分：添加水平滚动按钮

因为水平滚动功能在桌面上很明显，我们将添加水平滚动按钮以获得更好的用户体验。

添加部分

为此，请创建一个新的常规部分。

打开section设置，取出默认padding：

• 填充：0px 顶部，0px 底部

添加行

为该部分指定一列行。

并按如下方式更新行设置：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：900px
• 填充：顶部 10 像素，底部 10 像素，右侧 10 像素

创建左滚动按钮

要创建左滚动按钮，请向列/行添加一个模糊模块。

取出默认的标题和正文内容，并添加一个左箭头图标。

在设计选项卡下，更新以下内容：

• 图标颜色：#333333
• 图像/图标对齐方式：居中
• 使用图标字体大小：是
• 图标字体大小：40px
• 内容宽度：100%
• 宽度：50px

然后给blurb一个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 );

更新列宽

如果要更新每个表格列的 min-width，可以在 CSS 中更改 min-width 的值。

更新滚动列数

当前，单击按钮将水平（向左或向右）滚动等于两个列宽的距离。 要更改滚动的列数，请更新变量scrollByColumnNumber的值中最右侧的数字（当前为数字 2）。

添加交替列颜色

现在部分背景颜色决定了所有表格列（或行）的颜色。 如果要为这些列创建交替颜色，请使用多选来选择每隔一行并为每一行添加白色背景色。

最后结果

现在来看看最终的结果吧！

这是桌面上桌子的最终设计。

这是桌面和移动设备上的水平滚动功能。

最后的想法

无论我们在网页设计的世界里走多远，表格似乎总有其一席之地。 他们继续提供有价值的解决方案，以用户理解的方式组织内容。 这张带有水平滚动条的表格应该可以派上用场，适用于广泛的用例。 而且，也许最好的部分是，您可以使用视觉构建器以无数创造性的方式更新表格内容（通过 Divi 的内置内联编辑器）并设置表格样式。

有关在 WordPress 中创建响应式表的更多信息，请查看我们关于如何在 WordPress 中创建响应式表的文章。

我期待在评论中收到您的来信。

干杯!