水平捲動
保留完整表格語意與欄位對照關係，適合價格比較、規格比較與報表資料。
卡片化重排
把每一列轉成卡片，提升手機閱讀效率，特別適合訂單、會員與工單列表。
價格方案卡片切換
桌機維持比較表，手機改成方案卡片，適合 SaaS 方案、課程方案與會員分級頁面。
欄位優先級精簡
在小螢幕優先顯示關鍵欄位，將次要資訊隱藏，常見於後台管理介面。
Choose the right pattern
保留完整表格語意與欄位對照關係，適合價格比較、規格比較與報表資料。
把每一列轉成卡片，提升手機閱讀效率，特別適合訂單、會員與工單列表。
桌機維持比較表，手機改成方案卡片，適合 SaaS 方案、課程方案與會員分級頁面。
在小螢幕優先顯示關鍵欄位，將次要資訊隱藏，常見於後台管理介面。
實務重點：不要先問「哪種版型最流行」，應先問「使用者在這張表格上要完成什麼任務」。
Responsive Table 的核心目標，是讓表格資料在桌機與手機上都能保持可讀、可操作、可比較。
表格在桌機上很自然，因為螢幕寬度足夠；但到了手機，欄位一多就會遇到擠壓、文字換行、操作困難、資訊關係不清楚等問題。因此 Responsive Table 的設計重點，不只是讓表格縮小，而是要依照資料情境選擇合適的呈現方式。
常見於訂單列表、會員列表、商品清單、報表資料。
這類資料通常有很多欄位，例如：
| 訂單編號 | 客戶 | 金額 | 狀態 | 付款方式 | 建立時間 | 操作 |
|---|---|---|---|---|---|---|
| A1001 | 王小明 | NT$1,280 | 已付款 | 信用卡 | 2026-05-08 09:30 | 查看 |
特性：
適合做法：
桌機維持表格，手機改為橫向捲動或卡片式。
常見於 SaaS 官網、課程方案、服務方案。
這類資料的重點是比較。
| 功能 | 免費版 | 專業版 | 企業版 |
|---|---|---|---|
| API 存取 | 不支援 | 支援 | 支援 |
特性：
適合做法：
手機可改成每個方案一張卡片，避免使用者左右滑動時失去上下文。
例如 KPI 報表、伺服器狀態、API 統計、系統監控資料。
特性：
適合做法：
保留表格語意，外層加上水平捲動容器。
| 做法 | 適用情境 | 優點 | 缺點 |
|---|---|---|---|
| 水平捲動表格 | 報表、後台、資料密集表格 | 保留原始表格結構 | 手機上需要左右滑動 |
| 卡片式表格 | 訂單、會員、商品、列表資料 | 手機閱讀體驗佳 | 不適合大量比較 |
| 隱藏次要欄位 | 欄位有明顯優先順序 | 手機畫面簡潔 | 可能遺漏資訊 |
| 固定第一欄 | 比較表、財務資料 | 容易對照資料 | CSS 複雜度較高 |
| 混合式設計 | 真實產品常見 | 可兼顧桌機與手機 | 需要較完整規劃 |
實務上最常用的是桌機表格，手機卡片，或桌機表格，手機水平捲動。
如果使用者需要橫向或縱向比較資料，例如價格表、財務表、監控表，應優先保留表格結構。
如果使用者主要是逐筆查看資料，例如訂單、會員、文章列表，可以在手機上改成卡片式。
font-size 縮小表格單純把字變小會造成：
Responsive Table 的重點是重新安排資訊，而不是硬把所有欄位塞進小畫面。
桌機表格可以透過表頭知道每個欄位代表什麼，但手機卡片式呈現時，每一格資料旁邊都應該補上欄位名稱，例如：
訂單編號：A1001
客戶名稱：王小明
金額：NT$1,280
狀態：已付款這樣使用者才不會失去資料脈絡。
表格資料應該保留基本語意：
<table><caption> 描述表格用途<th>scope="col"這個做法最簡單，也最適合資料密集型表格。
對應檔案：scroll-table.html
請直接參考 scroll-table.html。
overflow-x: auto.table-wrapper {
overflow-x: auto;
}這是水平捲動表格的核心。表格本身不要直接套 overflow-x，因為 <table> 的 overflow 行為並不穩定，通常要包一層容器。
min-widthtable {
min-width: 820px;
}這樣可以避免表格在手機上被硬壓縮。當螢幕小於設定寬度時，外層容器就會產生水平捲動。
td.amount {
text-align: right;
font-variant-numeric: tabular-nums;
}金額、數量、百分比這類資料建議靠右對齊。font-variant-numeric: tabular-nums 可以讓數字寬度一致，報表閱讀起來更穩定。
這個做法適合逐筆閱讀的資料，例如訂單、會員、商品、文章列表。
對應檔案：stack-table.html
請直接參考 stack-table.html。
table,
thead,
tbody,
tr,
th,
td {
display: block;
}這樣可以讓每一列 tr 變成一張卡片，每一格 td 變成卡片中的一行資訊。
thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}這樣可以讓畫面上不顯示表頭，但仍保留語意。這比直接使用 display: none 更適合需要兼顧可及性的表格。
data-label 補上欄位名稱<td data-label="訂單編號">A1001</td>手機版透過 CSS 顯示欄位名稱：
td::before {
content: attr(data-label);
}這樣每一筆資料在手機上都會有清楚的欄位標籤。
價格方案比較表的重點是比較方案。桌機適合用表格，手機則適合改成方案卡片。
對應檔案：pricing-table.html
請直接參考 pricing-table.html。
價格比較表在桌機適合表格，在手機適合卡片。因此這個範例直接準備兩份結構：
<table class="desktop-table">...</table>
<section class="pricing-cards">...</section>再透過 media query 切換顯示。
在真實專案中，這種做法通常會交給前端框架用同一份資料陣列渲染。
這種做法不是把資料改成卡片，而是在小螢幕先保留最重要的欄位，把次要欄位隱藏。
適合：
對應檔案：priority-table.html
實作重點：
.optional.optional這個做法的前提是欄位優先順序必須清楚，否則會直接造成資訊缺漏。
| 資料類型 | 建議做法 |
|---|---|
| 報表、統計、監控資料 | 水平捲動表格 |
| 訂單、會員、商品列表 | 手機卡片式 |
| 價格方案比較 | 桌機表格，手機方案卡片 |
| 欄位很多的後台資料 | 水平捲動加欄位優先順序 |
| 需要頻繁操作的資料 | 手機卡片式並放大操作按鈕 |
| 需要精準比較的資料 | 保留表格結構 |
完成 Responsive Table 後，建議檢查以下項目：
Responsive Table 沒有單一標準解法，必須依照資料用途選擇呈現方式。
如果資料重點是比較，應該盡量保留表格結構；如果資料重點是逐筆閱讀，手機版改成卡片通常會更容易使用。真正好的 Responsive Table，重點不是把桌機表格硬塞進手機，而是讓使用者在不同裝置上都能有效理解資料、完成操作。