如何製作 WordPress 手機版 RWD 表格

更新日期： 2025 年 3 月 5 日

現在做網站，讓網頁在各種裝置上都能好好顯示已經是基本功了，特別是現在大家用手機上網的比例越來越高，網站在手機上看起來舒服真的很重要。

不過，要讓 WordPress 裡的表格在手機上也能好好呈現，常常是個大難題。傳統的表格在小螢幕上很容易變得擁擠，要嘛就是字太小，要嘛就是要一直左右滑動，使用體驗不太好。

沒關係！這篇文章會一步步教你，怎麼用 CSS、PHP 和 JavaScript 來做一個專為手機設計的 RWD 表格。不管你是新手還是技術小白，都能輕鬆跟著做出來～

範例：手機版 RWD 表格效果展示

以下是一個簡單的範例表格，當您在手機上查看時，可以點擊每一列以展開更多資訊。

產品名稱	價格	庫存狀態	評分
商品 A	$100	有庫存	★★★★☆
商品 B	$200	缺貨	★★★☆☆
商品 C	$150	有庫存	★★★★★

不同裝置上的顯示效果

桌面版視圖

在桌面裝置（如電腦、平板橫向模式）上，表格會以傳統的行與列的方式完整呈現所有資料。

標題列 (產品名稱、價格、庫存狀態、評分) 始終位於表格頂部，使用者可以直觀地對比每個商品的資訊，特別適合在大螢幕中瀏覽複雜數據或進行多項目比對。

手機版視圖

在手機或小螢幕裝置上，表格將進入 RWD 模式：

標題列自動隱藏，避免佔用有限的螢幕空間。
每一列（例如 商品 A 的那一行）會顯示為一個可點擊的區塊，預設僅顯示主要資訊（如產品名稱）。
點擊區塊後，會展開顯示更多細節，包括價格、庫存狀態、評分等資訊。
使用者可以透過點擊 + 與 - 圖示輕鬆切換展開/收合狀態，避免一次顯示過多內容而導致操作不便。
這種設計特別適合電商商品列表、行事曆資訊或是會員名單等需要展示多欄位資料的情境。

RWD 表格的實際優勢

提升可讀性：避免小螢幕上橫向捲動，讓使用者只需上下滑動即可瀏覽資訊。
操作友善：點擊展開的效果讓資訊以更直觀的方式呈現，減少誤點的情況。
視覺上更簡潔：收合的列只展示關鍵資訊，當需要時再展開更多內容，有效減少資訊過載。

接下來，我們將一步步介紹如何製作這個 RWD 表格，讓您的網站也能實現這種靈活又美觀的效果！

準備工作

在開始製作 RWD 表格之前，我們需要先完成一些基礎準備，包括安裝和設置必要的外掛工具，這樣才能順利地將 CSS、PHP 與 JavaScript 代碼整合進 WordPress 網站中。

以下是詳細的步驟說明：

安裝必要的外掛

1️⃣ Code Snippets

用途：

這個外掛允許您在不修改主題或子主題的情況下，直接將 PHP 代碼片段添加到網站中，類似於在主題的 functions.php 中插入代碼，但操作更簡單、安全。

安裝步驟：

進入 WordPress 後台，點選 外掛 > 安裝外掛。
在搜尋欄中輸入「Code Snippets」。
找到外掛後點選安裝，然後啟用。

特點：

允許管理所有代碼片段，開啟或關閉片段非常方便。
代碼錯誤時，系統會自動停用該片段，避免網站崩潰。

2️⃣ Insert Headers and Footers

用途：

用於在網站的 <head>、<body> 以及 <footer> 區域插入自訂的 HTML、CSS 或 JavaScript 代碼。

由於 Code Snippets 免費版本不支持插入 JS 代碼，我們將使用此外掛來完成 JS 代碼的嵌入。

安裝步驟：

同樣進入 WordPress 後台，前往 外掛 > 安裝外掛。
搜尋「Insert Headers and Footers」，然後點選安裝並啟用。

特點：

將代碼放入指定區域，不影響網站主題檔案。
非常適合插入追蹤碼 (如 Google Analytics) 或其他腳本。

設置外掛

完成安裝後，我們需要進一步配置這兩個外掛，以便讓它們開始正常運作。

1️⃣ Code Snippets 外掛設置

進入 WordPress 後台，選擇 Code Snippets > 新增片段。
點選 新增 PHP 片段，給片段取一個名稱（例如「RWD 表格 Data Label」）。
在代碼區域內，將稍後提供的 PHP 代碼貼入（例如用於自動添加 data-label 屬性到表格中）。
設置片段的作用範圍：建議選擇「僅在前台」執行，這樣可以避免影響後台操作。
點選 儲存變更並啟用，確保 PHP 代碼已經成功啟用。

注意事項：

每次修改 PHP 代碼後，建議先預覽網站，避免因代碼錯誤導致網站無法正常顯示。
若網站進入維護模式或報錯，可以通過 Code Snippets 管理頁面關閉問題代碼片段。

2️⃣ Insert Headers and Footers 外掛設置

在 WordPress 後台，前往 設定 > Insert Headers and Footers。
進入頁面後，可以看到三個區塊：「Header」、「Body」、「Footer」。
將稍後提供的 JavaScript 代碼貼入 Footer 區塊。這樣做可以：
- 確保 JS 代碼在頁面內容載入後才執行，避免干擾頁面其他元素。
- 提升頁面加載速度，特別是在行動裝置上。
點選 儲存變更，確保代碼正確應用到網站頁面中。

小技巧：

儲存後，可以刷新網站前台並開啟瀏覽器開發者工具 (F12)，確認 JS 代碼是否正確加載。
在 Console（控制台）中，若無錯誤訊息，表示代碼載入正常。

完成以上準備工作後，我們就可以進入實作階段，一步步將 RWD 表格所需的 CSS、PHP 和 JavaScript 代碼加入網站，讓我們的表格能夠自動適應手機版顯示，提供良好的用戶體驗！

設置 CSS 樣式

將 CSS 代碼加入 WordPress

進入 WordPress 後台，至 外觀 > 自訂 > 額外 CSS，將以下代碼貼上：

@media screen and (max-width: 500px) {
    table.has-fixed-layout {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 1rem;
    }

    table.has-fixed-layout thead {
        display: none;
    }

    table.has-fixed-layout tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        background-color: #ffffff;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    table.has-fixed-layout td {
        display: flex;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    table.has-fixed-layout td:first-child {
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
        background-color: #03588D;
        color: #ffffff;
        font-weight: bold;
    }

    table.has-fixed-layout td:last-child {
        border-bottom: 0;
    }

    table.has-fixed-layout td::before {
        content: attr(data-label);
        min-width: 40px;
        font-weight: bold;
        color: #6c757d;
        font-size: 12px;
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    table.has-fixed-layout td span.content {
        color: #333;
        font-size: 16px;
    }

    table.has-fixed-layout tbody tr.collapsed td:not(:first-child) {
        display: none;
    }

    .toggle-icon {
        margin-left: 10px;
        font-weight: bold;
        font-size: 1.2rem;
        color: #fff;
    }
}

@media screen and (min-width: 501px) {
    .toggle-icon {
        display: none;
    }
}

CSS 重點說明

在手機版 RWD 表格的設計中，CSS 扮演了非常重要的角色，這裡我們來更詳細地說明每個關鍵點的作用與設計思路：

1️⃣ 隱藏表格標題列

問題點：在傳統桌面版表格中，標題列 (<thead>) 會顯示在表格的最上方，標示每一欄的名稱（例如「產品名稱」、「價格」、「庫存狀態」等）。

但在手機版小螢幕中，這一行標題會佔用寶貴的空間，影響使用者瀏覽內容。
解決方法：我們透過以下 CSS 代碼，將標題列隱藏：

table.has-fixed-layout thead {
    display: none;
}

效果：當表格切換到手機版視圖（螢幕寬度小於 500px）時，整個標題列消失，讓更多空間用來展示實際數據，畫面看起來更清爽。

2️⃣ 使用 `data-label` 動態生成欄位名稱

作用：隱藏標題列後，單純的數據會變得不易閱讀，例如使用者看到「$100」，但不知道這是「價格」還是「庫存數量」。

為了解決這個問題，我們使用 data-label 來動態標示每個單元格的欄位名稱。
實現方式：
- 在 PHP 代碼中，為每個 <td> 元素新增 data-label 屬性，這個屬性的值就是對應的欄位名稱（稍後會說明）。
- 接著使用以下 CSS 讓 data-label 內容顯示在每個單元格的前面：

table.has-fixed-layout td::before {
    content: attr(data-label); /* 抓取 data-label 的內容 */
    min-width: 40px;            /* 設置標題最小寬度 */
    font-weight: bold;
    color: #6c757d;             /* 標題文字顏色 */
    font-size: 12px;
    margin-right: 10px;         /* 與內容之間留空 */
    flex-shrink: 0;
}

顯示效果：
- 在每個單元格 (例如「$100」) 的左側，會出現小標題（例如「價格」），讓使用者即使在手機上也能清楚瞭解每個數據的意義。
- 這種方式特別適合於手機版的點擊展開效果，因為每個欄位的標題都會在展開後自動顯示。

3️⃣ 增加展開/收合效果

目標：在小螢幕上，直接顯示所有欄位可能會讓表格變得過於冗長或擁擠。

因此，我們使用「手風琴效果 (Accordion)」的設計，讓表格的每一行可以點擊展開或收合，顯示更多資訊。
實現方法：
- 預設時，每一行 <tr> 元素都會加上 collapsed 類別，讓它僅顯示第一個單元格（例如「商品名稱」）。
- 點擊這一行時，透過 JavaScript 切換 collapsed 類別，讓其他欄位顯示出來（稍後會說明）。
- 使用以下 CSS 代碼控制顯示與隱藏效果：

/* 收合狀態時，隱藏除第一個欄位以外的所有單元格 */
table.has-fixed-layout tbody tr.collapsed td:not(:first-child) {
    display: none;
}

/* 當沒有 collapsed 類別時，顯示所有單元格 */
table.has-fixed-layout tbody tr:not(.collapsed) td {
    display: flex;
}

點擊效果：
- 我們使用 .toggle-icon 來提供視覺提示，顯示「+」或「-」符號，讓使用者知道這一列目前是收合還是展開狀態。
- 點擊行列後，符號會動態切換，增加互動性。

4️⃣ 視覺與操作上的優化

顏色與樣式：
- 第一個單元格（通常是關鍵資訊，例如產品名稱）的背景設置為深藍色，文字為白色，與其他單元格形成對比。
- 每行數據以卡片 (Card) 形式顯示，四周有圓角 (border-radius: 8px)，增強視覺上的獨立性。
動態效果：
- 使用 transition: background-color 0.3s，讓點擊或滑動時有漸變效果，提升使用體驗。
手勢友好：
- 設置 cursor: pointer，當使用者點擊表格時能感受到可操作性，避免操作上出現混淆。

設置 PHP 自動填入 data-label

新增 PHP 代碼至 Code Snippets

將以下 PHP 代碼複製並新增至 Code Snippets：

function add_data_label_to_table($content) {
    $dom = new DOMDocument();
    @$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));

    $tables = $dom->getElementsByTagName('table');
    foreach ($tables as $table) {
        $thead = $table->getElementsByTagName('thead')->item(0);
        $tbody = $table->getElementsByTagName('tbody')->item(0);

        if ($thead && $tbody) {
            $th_elements = $thead->getElementsByTagName('th');

            foreach ($tbody->getElementsByTagName('tr') as $tr) {
                $td_elements = $tr->getElementsByTagName('td');
                foreach ($td_elements as $index => $td) {
                    if ($th_elements->item($index)) {
                        $label = $th_elements->item($index)->textContent;
                        $td->setAttribute('data-label', $label);
                        
                        $currentContent = $td->textContent;
                        $newContent = $dom->createDocumentFragment();
                        $newContent->appendXML('<span class="content">' . htmlspecialchars($currentContent) . '</span>');
                        
                        while ($td->hasChildNodes()) {
                            $td->removeChild($td->firstChild);
                        }
                        $td->appendChild($newContent);
                    }
                }
            }
        }
    }
    
    return $dom->saveHTML();
}

add_filter('the_content', 'add_data_label_to_table');

PHP 代碼的作用與細節

1️⃣ 自動為每個 `<td>` 元素新增 `data-label`

💡 為什麼需要 `data-label`？

當手機版表格切換到手風琴式展開/收合效果 (collapsed) 時，標題列 (<thead>) 會被隱藏。

如果沒有 data-label，使用者可能無法知道每個欄位的內容。

例如，看到「$100」時，無法分辨這是「價格」還是「庫存數量」。

🔍 PHP 代碼實現原理

$th_elements = $thead->getElementsByTagName('th');

foreach ($tbody->getElementsByTagName('tr') as $tr) {
    $td_elements = $tr->getElementsByTagName('td');
    foreach ($td_elements as $index => $td) {
        if ($th_elements->item($index)) {
            $label = $th_elements->item($index)->textContent;
            $td->setAttribute('data-label', $label);
        }
    }
}

🚀 運作流程

抓取標題列的內容
- 使用 getElementsByTagName('th') 取得所有 <th> 元素，作為每一欄的標題名稱（如「產品名稱」、「價格」等）。
遍歷資料列與單元格
- 每一行 (<tr>) 包含多個 <td>，代碼會逐一對應 <th> 與 <td>，將欄位名稱設定到 data-label 屬性中。
設定 data-label 屬性
- 例如，若 <th> 標題是「價格」，則該欄位會變成：

<td data-label="價格">$100</td>

🎯 效果

CSS 中會將 data-label 作為小標題顯示在數據前面，增強手機版表格的可讀性。
在手風琴展開效果下，數據和標題能同步顯示，避免資訊混淆。

2️⃣ 將內容包裝至 `<span>`，便於樣式控制

💡 為什麼要包裝 `<span>`？

將內容用 <span> 包裝，能讓樣式設定與動態效果控制更靈活，例如：

單獨控制文字樣式（顏色、字體大小）。
在手風琴效果中，配合 JavaScript 實現更豐富的動畫效果。

🔍 PHP 代碼實現原理

$currentContent = $td->textContent;
$newContent = $dom->createDocumentFragment();
$newContent->appendXML('<span class="content">' . htmlspecialchars($currentContent) . '</span>');

while ($td->hasChildNodes()) {
    $td->removeChild($td->firstChild);
}
$td->appendChild($newContent);

🚀 運作流程

取得原始內容
- 使用 $td->textContent 獲取 <td> 中的文本，例如 $100 或 有庫存。
包裝到 <span> 中
- 透過 createDocumentFragment() 方法，將文本包裝成 <span class="content">...</span> 形式。
替換舊內容
- 清空原本的 <td> 內容，將新的 <span> 節點插入，確保樣式能夠正確應用。

🎯 效果

讓我們可以在 CSS 中針對 .content 類別設定樣式，例如：

table.has-fixed-layout td span.content {
    color: #333;
    font-size: 16px;
    gap: 8px;
}

在手機版上配合點擊效果，讓每個單元格在展開時有更好的顯示效果，例如淡入淡出或動畫過渡。

設置 JavaScript 動態效果

將 JS 代碼加入 Insert Headers and Footers

將以下代碼貼入 Insert Headers and Footers 的 Footer 區域：

document.addEventListener('DOMContentLoaded', function () {
  if (window.matchMedia('(max-width: 500px)').matches) {
    const rows = document.querySelectorAll('.has-fixed-layout tbody tr')

    rows.forEach((row) => {
      row.classList.add('collapsed')

      const icon = document.createElement('span')
      icon.className = 'toggle-icon'
      icon.textContent = '+'

      const firstCell = row.querySelector('td:first-child')
      if (firstCell) {
        firstCell.appendChild(icon)
      }

      row.addEventListener('click', function () {
        row.classList.toggle('collapsed')
        icon.textContent = row.classList.contains('collapsed') ? '+' : '-'
      })
    })
  }
})

JavaScript 代碼效果

JavaScript 在 RWD 表格中扮演了互動控制的重要角色，特別是在手機版顯示時，提供了 展開/收合 (Accordion) 的效果。

這段代碼實現了讓使用者點擊表格行 (<tr>) 時，顯示或隱藏更多資料，並同步切換 + / – 的圖示，增強使用體驗。

以下是詳細的說明：

1️⃣ 預設表格為收合狀態 (`collapsed` 類別)

💡 預設收合的目的

在手機螢幕較小的情況下，僅顯示關鍵資訊，避免一次顯示太多內容導致畫面擁擠。
預設為收合狀態 (collapsed 類別)，只顯示每一行的第一個單元格 (例如「產品名稱」)，其餘資訊隱藏。

🔍 JavaScript 實現原理

document.addEventListener('DOMContentLoaded', function () {
    if (window.matchMedia('(max-width: 500px)').matches) {
        const rows = document.querySelectorAll('.has-fixed-layout tbody tr');
        
        rows.forEach((row) => {
            row.classList.add('collapsed'); // 預設加上 collapsed 類別

            // 創建「+」圖示
            const icon = document.createElement('span');
            icon.className = 'toggle-icon';
            icon.textContent = '+';

            // 將圖示插入第一個 <td> 單元格中
            const firstCell = row.querySelector('td:first-child');
            if (firstCell) {
                firstCell.appendChild(icon);
            }
        });
    }
});

🚀 運作流程

判斷螢幕寬度
- 使用 window.matchMedia('(max-width: 500px)') 確認是否處於手機版顯示模式。
選取所有表格行 (<tr>)
- document.querySelectorAll('.has-fixed-layout tbody tr') 取得所有需要展開/收合效果的表格列。
設置預設狀態
- 對每一行 (<tr>) 添加 collapsed 類別，使該行默認僅顯示第一個單元格 (<td>)，其餘內容被隱藏 (透過 CSS 控制顯示樣式)。
初始化「+」圖示
- 創建一個 <span> 元素，設定類別為 toggle-icon，文字內容為「+」，表示該行處於收合狀態。
- 將這個圖示插入到第一個單元格 (td:first-child) 中，讓使用者直觀地知道該行可以展開。

2️⃣ 點擊列時，切換展開/收合效果，並修改圖示 `+ / -`

💡 互動效果的目的

當使用者點擊某一行時，該行的所有單元格 (<td>) 都會展開顯示更多資料。
圖示同步變化，從「+」變為「-」，幫助使用者辨別當前狀態，並引導他們再次點擊以收合資料。

🔍 JavaScript 實現原理

row.addEventListener('click', function () {
    row.classList.toggle('collapsed'); // 切換收合/展開狀態
    icon.textContent = row.classList.contains('collapsed') ? '+' : '-'; // 切換圖示
});

🚀 運作流程

監聽點擊事件
- 為每一行 (<tr>) 綁定 click 事件監聽器。
切換 collapsed 類別
- row.classList.toggle('collapsed') 用來切換該行的展開/收合狀態：
  - 如果 collapsed 類別存在，則移除該類別 (展開所有 <td> 元素)。
  - 如果 collapsed 類別不存在，則添加該類別 (只顯示第一個 <td> 元素)。
動態切換圖示內容
- 使用 row.classList.contains('collapsed') 檢查當前行是否處於收合狀態：
  - 如果是收合 (collapsed 存在)，則圖示顯示「+」。
  - 如果是展開 (collapsed 被移除)，則圖示顯示「-」。

3️⃣ 效果展示 (桌面與手機版對比)

桌面版：顯示傳統表格，所有欄位資料一覽無遺。
手機版 (RWD 生效)：
- 預設狀態下，僅顯示每一行的關鍵資訊 (第一個 <td> 單元格)。
- 點擊行列後，所有隱藏欄位依次展開，並顯示對應的 data-label 標題。
- 圖示從「+」變為「-」，再次點擊則收合欄位，恢復到簡潔模式。

運作流程

flowchart TB
    %% 網頁加載階段
    A[頁面加載完成] -->|1.提取表格內容| B[PHP 處理內容]
    B -->|自動添加 data-label| C[生成新的 HTML 結構]
    
    %% 將 PHP 處理後的內容注入到頁面中
    C -->|渲染 HTML| D[瀏覽器渲染表格]
    
    %% CSS 負責樣式與 RWD 設計
    D -->|2.應用樣式| E[CSS 設置 RWD 樣式]
    E -->|隱藏標題列 & 設置 data-label 顯示| F[手機版樣式生效]
    
    %% JavaScript 增加手風琴效果
    D -->|3.綁定點擊事件| G[JavaScript 處理互動效果]
    G -->|切換收合/展開狀態| F
    
    %% 用戶操作
    H[用戶點擊表格行] -->|觸發點擊事件| G
    
    %% 整體資料流
    F -->|RWD 表格最終顯示| I[手機用戶獲得良好體驗]
    
    %% 顏色標示
    classDef php fill:#FFD700,stroke:#333,stroke-width:2px;
    classDef css fill:#1E90FF,stroke:#333,stroke-width:2px;
    classDef js fill:#32CD32,stroke:#333,stroke-width:2px;
    classDef ui fill:#FF6347,stroke:#333,stroke-width:2px;

    class B,C php;
    class E,F css;
    class G js;
    class H,I ui;

頁面加載完成 (A)

1️⃣ 提取頁面資源

當用戶進入網站頁面後，瀏覽器開始加載所有必要的資源，包括 HTML、CSS、JavaScript 以及圖片、字體等文件。

在頁面加載完成的這一刻，所有 DOM 元素已準備就緒，所有靜態資源已下載完成，瀏覽器可以開始進行進一步的數據處理和頁面渲染操作。

PHP 處理內容 (B → C)

1️⃣ 提取表格數據

PHP 腳本在伺服器端運行，首先讀取頁面中原始的 HTML 表格數據。

這些數據可能來自資料庫 (例如 MySQL)，或通過 API 獲取的動態數據。

2️⃣ 自動添加 `data-label` 屬性

PHP 代碼遍歷表格中的每個 <td> 元素 (單元格)。
根據 <th> (標題欄) 確定每一列對應的標題名稱。
自動在 <td> 中添加 data-label 屬性，例如：

<td data-label="姓名"><span>John</span></td>

<span> 元素將內容包裹，便於 CSS 和 JavaScript 進行樣式和動畫效果處理。

3️⃣ 生成新的 HTML 結構

經過 PHP 處理後，輸出的 HTML 結構已經內嵌了 data-label 信息。

最終生成的 HTML 會被注入到頁面中，為接下來的渲染和樣式應用做好準備。

渲染 HTML (C → D)

1️⃣ 瀏覽器構建 DOM

瀏覽器接收到 PHP 返回的更新 HTML 結構後，開始進行渲染。

渲染過程中，瀏覽器構建 DOM (Document Object Model)，並將表格的內容顯示在頁面上。

此時，表格僅顯示為靜態結構，尚未應用 RWD (響應式設計) 樣式和互動效果。

CSS 應用 RWD 樣式 (E → F)

1️⃣ 隱藏標題列 (`<thead>`)

在小螢幕裝置（如手機）中，通過 CSS 設置隱藏 <thead> 元素，以節省垂直空間：

@media (max-width: 768px) {
    table thead {
        display: none;
    }
}

2️⃣ 顯示 `data-label` 中的欄位名稱

利用 ::before 偽元素將 data-label 中的內容作為欄位標題顯示：

@media (max-width: 768px) {
    td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #666;
    }
}

這樣，當用戶在手機上查看表格時，每個欄位自帶標題，模擬卡片式顯示效果。

3️⃣ 設置展開/收合的動畫效果

使用 transition 屬性，讓展開/收合效果更平滑：

.collapsed {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.expanded {
    max-height: 200px; /* 根據內容調整高度 */
    transition: max-height 0.3s ease;
}

配合 JavaScript 的類別切換，在點擊時能夠流暢地展開和收合表格行。

JavaScript 處理互動效果 (G)

1️⃣ 綁定點擊事件到表格行

使用 JavaScript (或 jQuery) 為每一個 <tr> 元素 (表格行) 綁定點擊事件：

document.querySelectorAll('tr').forEach(row => {
    row.addEventListener('click', () => {
        row.classList.toggle('expanded');
        row.classList.toggle('collapsed');
    });
});

點擊時，自動切換 expanded 和 collapsed 類別，控制手風琴效果。

2️⃣ 實現手風琴效果

點擊事件觸發後，根據行的當前狀態 (expanded 或 collapsed) 進行顯示與隱藏：
- 展開時顯示更多內容，數據和標題對齊顯示。
- 收合時僅保留主要信息，隱藏額外資訊。

3️⃣ 切換符號顯示 (+ / -)

展開狀態顯示 “-“，收合狀態顯示 “+”：

const symbol = row.querySelector('.toggle-symbol');
symbol.textContent = row.classList.contains('expanded') ? '-' : '+';

用戶操作與頁面反饋 (H → G → F → I)

1️⃣ 用戶點擊觸發互動效果

當用戶點擊某個表格行 (例如查看詳細資訊) 時，JavaScript 監聽事件被觸發。

2️⃣ JavaScript 動態切換樣式

JS 自動切換表格行的類別，實現 collapsed 和 expanded 之間的轉換。

3️⃣ CSS 動態應用樣式

經過 JS 修改 DOM 結構後，CSS 自動應用動畫效果：
- 展開的行以不同的樣式突出顯示（例如背景顏色、邊框變化）。
- 手風琴效果提供視覺上的平滑過渡體驗。

4️⃣ 提供良好的 RWD 顯示效果

用戶在手機或小螢幕裝置上能夠通過點擊操作，獲得友好的 RWD (響應式) 表格體驗。
表格中的數據清晰可見，交互效果流暢，能夠有效避免小螢幕上的瀏覽困難。

整個流程通過 PHP、CSS 和 JavaScript 的緊密配合，實現了從數據處理、樣式設置到動態交互的完整 RWD 解決方案。

該方法無需複雜的插件，僅通過簡單的前後端協作，就能提供高效、可擴展的表格顯示效果。用戶無論是在桌面還是手機端，都能夠獲得一致、良好的瀏覽體驗。

結語

透過簡單的 CSS、PHP 與 JavaScript 設置，我們成功將傳統表格轉變為手機友善的 RWD 表格，並具備點擊展開收合的功能。

不論是產品列表、數據展示或是資訊表格，都能以更好的方式在手機上呈現。希望這篇教學能幫助到剛入門的朋友們，輕鬆打造自己的 WordPress RWD 表格！

範例：手機版 RWD 表格效果展示

不同裝置上的顯示效果

桌面版視圖

手機版視圖

RWD 表格的實際優勢

準備工作

安裝必要的外掛

1️⃣ Code Snippets

2️⃣ Insert Headers and Footers

設置外掛

1️⃣ Code Snippets 外掛設置

2️⃣ Insert Headers and Footers 外掛設置

設置 CSS 樣式

將 CSS 代碼加入 WordPress

CSS 重點說明

1️⃣ 隱藏表格標題列

2️⃣ 使用 data-label 動態生成欄位名稱

3️⃣ 增加展開/收合效果

4️⃣ 視覺與操作上的優化

設置 PHP 自動填入 data-label

新增 PHP 代碼至 Code Snippets

PHP 代碼的作用與細節

1️⃣ 自動為每個 <td> 元素新增 data-label

💡 為什麼需要 data-label？

🔍 PHP 代碼實現原理

🚀 運作流程

🎯 效果

2️⃣ 將內容包裝至 <span>，便於樣式控制

💡 為什麼要包裝 <span>？

🔍 PHP 代碼實現原理

🚀 運作流程

🎯 效果

設置 JavaScript 動態效果

將 JS 代碼加入 Insert Headers and Footers

JavaScript 代碼效果

1️⃣ 預設表格為收合狀態 (collapsed 類別)

💡 預設收合的目的

🔍 JavaScript 實現原理

🚀 運作流程

2️⃣ 點擊列時，切換展開/收合效果，並修改圖示 + / -

💡 互動效果的目的

🔍 JavaScript 實現原理

🚀 運作流程

3️⃣ 效果展示 (桌面與手機版對比)

運作流程

頁面加載完成 (A)

1️⃣ 提取頁面資源

PHP 處理內容 (B → C)

1️⃣ 提取表格數據

2️⃣ 自動添加 data-label 屬性

3️⃣ 生成新的 HTML 結構

渲染 HTML (C → D)

1️⃣ 瀏覽器構建 DOM

CSS 應用 RWD 樣式 (E → F)

1️⃣ 隱藏標題列 (<thead>)

2️⃣ 顯示 data-label 中的欄位名稱

3️⃣ 設置展開/收合的動畫效果

JavaScript 處理互動效果 (G)

1️⃣ 綁定點擊事件到表格行

2️⃣ 實現手風琴效果

3️⃣ 切換符號顯示 (+ / -)

用戶操作與頁面反饋 (H → G → F → I)

1️⃣ 用戶點擊觸發互動效果

2️⃣ JavaScript 動態切換樣式

3️⃣ CSS 動態應用樣式

4️⃣ 提供良好的 RWD 顯示效果

結語

Similar Posts

關於本站

2️⃣ 使用 `data-label` 動態生成欄位名稱

1️⃣ 自動為每個 `<td>` 元素新增 `data-label`

💡 為什麼需要 `data-label`？

2️⃣ 將內容包裝至 `<span>`，便於樣式控制

💡 為什麼要包裝 `<span>`？

1️⃣ 預設表格為收合狀態 (`collapsed` 類別)

2️⃣ 點擊列時，切換展開/收合效果，並修改圖示 `+ / -`

2️⃣ 自動添加 `data-label` 屬性

1️⃣ 隱藏標題列 (`<thead>`)

2️⃣ 顯示 `data-label` 中的欄位名稱