如何在 Divi 中創建帶有水平滾動的響應表

已發表: 2020-08-09

創建響應式表格可能是一個挑戰，尤其是當您有一個包含很多列的表格時。 解決這個問題的一個好方法是向表格添加水平滾動功能。 具有水平滾動的表格解決了兩個主要問題。 首先，它允許設計者保持表格內容所需的間距（非常窄的列會導致內容過多地混在一起）。 其次，它允許用戶在移動設備上查看易於閱讀的表格內容。

在本教程中，我們將向您展示如何使用 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 屬性。

帶水平滾動的divi表

添加行

現在部分 CSS 已就位，在該部分中創建一個單列行。

帶水平滾動的divi表

行設置

打開行設置並更新以下內容：

  • 天溝寬度：1
  • 寬度：100%

這將確保我們的表格列在我們將為表格項目添加的文本模塊之間沒有任何額外的邊距。

帶水平滾動的divi表

然後給該行一個右邊框，如下所示：

  • 右邊框寬度：1px
  • 右邊框顏色：#cccccc

帶水平滾動的divi表

然後更新填充：

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

帶水平滾動的divi表

在高級選項卡下，為該行指定一個自定義 CSS 類，如下所示：

  • CSS 類：et-scroll-table-column

稍後我們將需要它用於自定義代碼。

帶水平滾動的divi表

使用文本模塊創建表格項目

為了在每一行（或表格列）中創建表格項目，我們將使用文本模塊。

添加文本模塊

帶水平滾動的divi表

文字內容

接下來，將文本“Table Item”添加到文本模塊的正文內容中。

帶水平滾動的divi表

文字設計

在設計選項卡下，更新以下內容：

  • 文本對齊：居中
  • 高度：80px

帶水平滾動的divi表

  • 右邊框寬度：1px
  • 底部邊框顏色：#cccccc

此邊框將匹配行的右邊框。

帶水平滾動的divi表

文本 CSS

要確保模塊內的文本保持垂直和水平居中，請將以下 CSS 添加到高級選項卡下的主元素： 

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

帶水平滾動的divi表

用於更多表格項目的複製文本模塊

現在我們的第一個表項已經創建，複製文本模塊（根據需要多次）以在行內創建其他表項。

帶水平滾動的divi表

創建表格列的標題

我們需要將最頂部的文本模塊轉換為表格列的標題。 為此，打開頂部文本模塊的設置，將圖層視圖中的標籤更新為“標題”，然後將文本“標題”與正文內容一起添加。

帶水平滾動的divi表

然後更新背景顏色。

  • 背景：#333333

帶水平滾動的divi表

並更新文字的設計如下：

  • 文字字體粗細：粗體
  • 文字字體樣式：TT
  • 文字文字顏色：#ffffff

帶水平滾動的divi表

複製更多表格列的行

現在第一行已完成，我們可以復制該行以根據表的需要創建盡可能多的表列。 對於此設計，我們將復制該行八次以創建總共九行。

帶水平滾動的divi表

第 2 部分：設計帶有垂直標題的粘性表格列

最左邊的行（或第一行）將作為我們表格的垂直標題。 首先，我們需要更新行背景和每個文本模塊，使它們與每列頂部的標題具有相同的設計。 然後，我們將使整行具有粘性，以便在用戶水平滾動以查看隱藏的表格列時保持原位。

更新行背景

為此，請打開第一行的設置並更新背景顏色：

  • 背景顏色：#333333

帶水平滾動的divi表

更新文本模塊

然後，打開包含標題的頂部文本模塊的設置。 右鍵單擊文本選項組並選擇擴展文本樣式。 在“擴展樣式”彈出窗口中，選擇將文本的樣式擴展到此列中的所有文本。 然後單擊擴展按鈕。

帶水平滾動的divi表

然後多選該行中的所有文本模塊（按住 ctrl（或 cmd）並單擊每個模塊）並使用文本“標題”更新正文內容。

帶水平滾動的divi表

添加徽標

由於我們不需要此列中最頂部的標題，因此我們將在表格中添加一個徽標。

打開第一行中最頂部文本模塊的設置。

然後刪除正文。

帶水平滾動的divi表

然後添加徽標（確保它大約為 40 像素 x 40 像素）作為背景圖像。 確保背景圖像大小設置為“實際大小”。

帶水平滾動的divi表

使垂直標題行具有粘性

要使行具有粘性，請將以下自定義 CSS 添加到主元素： 

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

（您可以忽略使用粘性屬性顯示的任何代碼錯誤。）

帶水平滾動的divi表

要確保粘性行在其他行上方保持可見，請更新 Z 索引：

  • Z指數：13

帶水平滾動的divi表

第 3 部分：更新表的部分

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

打開部分設置並添加背景顏色：

  • 背景顏色：#ffeaef

帶水平滾動的divi表

然後更新尺寸和間距如下：

  • 寬度：100%
  • 最大寬度：900px
  • 邊距：10vh 頂部
  • 填充：0px 頂部，0px 底部

帶水平滾動的divi表

然後添加以下 CSS 類：

  • CSS 類：et-scroll-table

並更新溢出：

  • 水平溢出：滾動
  • 垂直溢出：隱藏

（注意：我們已經將“溢出：滾動”作為自定義 CSS 添加到該部分，以便滾動功能也將在可視化構建器上生效。）

帶水平滾動的divi表

第 4 部分：添加水平滾動按鈕

因為水平滾動功能在桌面上很明顯，我們將添加水平滾動按鈕以獲得更好的用戶體驗。

添加部分

為此，請創建一個新的常規部分。

帶水平滾動的divi表

打開section設置，取出默認padding：

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

帶水平滾動的divi表

添加行

為該部分指定一列行。

帶水平滾動的divi表

並按如下方式更新行設置：

  • 天溝寬度：1
  • 寬度：100%
  • 最大寬度：900px
  • 填充：頂部 10 像素，底部 10 像素，右側 10 像素

帶水平滾動的divi表

創建左滾動按鈕

要創建左滾動按鈕，請向列/行添加一個模糊模塊。

帶水平滾動的divi表

取出默認的標題和正文內容，並添加一個左箭頭圖標。

帶水平滾動的divi表

在設計選項卡下，更新以下內容：

  • 圖標顏色：#333333
  • 圖像/圖標對齊方式：居中
  • 使用圖標字體大小：是
  • 圖標字體大小：40px
  • 內容寬度：100%
  • 寬度：50px

帶水平滾動的divi表

然後給blurb一個CSS類：

  • CSS 類：et-scroll-left

這對於稍後使用我們的代碼將點擊滾動功能添加到模糊/按鈕是必要的。

帶水平滾動的divi表

創建右滾動按鈕

要創建右滾動按鈕，請複制簡介，並使用右箭頭更新圖標。

帶水平滾動的divi表

然後更新 CSS 類：

  • CSS 類：et-scroll-right

帶水平滾動的divi表

要水平對齊按鈕，請打開列的設置，然後添加以下自定義 CSS： 

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

帶水平滾動的divi表

第 5 部分：添加自定義代碼

對於本教程的最後一部分，我們需要添加為行（實際上是我們的表格列）設置最小寬度所需的 CSS 以及將滾動功能添加到按鈕所需的 JS 代碼。

要添加代碼，請在第二個簡介下添加一個代碼模塊。

帶水平滾動的divi表

在代碼框中，粘貼以下 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 );

帶水平滾動的divi表

更新列寬

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

帶水平滾動的divi表

更新滾動列數

當前，單擊按鈕將水平（向左或向右）滾動等於兩個列寬的距離。 要更改滾動的列數，請更新變量scrollByColumnNumber的值中最右側的數字（當前為數字 2）。

帶水平滾動的divi表

添加交替列顏色

現在部分背景顏色決定了所有表格列（或行）的顏色。 如果要為這些列創建交替顏色，請使用多選來選擇每隔一行並為每一行添加白色背景色。

帶水平滾動的divi表

最後結果

現在來看看最終的結果吧！

這是桌面上桌子的最終設計。

帶水平滾動的divi表

這是桌面和移動設備上的水平滾動功能。

最後的想法

無論我們在網頁設計的世界裡走多遠，表格似乎總有其一席之地。 他們繼續提供有價值的解決方案，以用戶理解的方式組織內容。 這張帶有水平滾動條的表格應該可以派上用場，適用於廣泛的用例。 而且，也許最好的部分是，您可以使用視覺構建器以無數創造性的方式更新表格內容（通過 Divi 的內置內聯編輯器）並設置表格樣式。

有關在 WordPress 中創建響應式表的更多信息，請查看我們關於如何在 WordPress 中創建響應式表的文章。

我期待在評論中收到您的來信。

乾杯!