在手機開啟方案比較表，只看到第一個方案，旁邊沒有捲軸，也沒有提示。訪客很容易以為後面沒有內容。把表格縮到每個字都擠成一列，雖然不再超出螢幕，卻更難比較。
多個方案確實需要並排時，可以讓表格在自己的區塊內橫向捲動，同時保留比較項目和欄名。先整理內容，再決定哪些欄位值得固定；不要把整個網頁做成左右移動。
先選哪些資訊值得並排
比較表適合回答同一組問題，例如三種網站方案的用途、內容管理方式與維護工作。欄位順序要一致，文字盡量簡短。如果每格都是一段介紹，訪客會一邊左右滑、一邊上下找，表格就失去比較的作用。
只比較兩個很簡單的選項時，兩張卡片也許更好讀。若讀者真正需要對照十個規格，不要為了手機外觀刪掉關鍵欄位；改提供可捲表格，並在附近交代怎麼讀。表格裡的資料要有相同尺度，例如每月與每年費用不能直接並排成同一列卻不註明單位。
只讓表格區塊橫向捲動
把表格包在容器裡，讓容器最大寬度跟著正文，表格則保留閱讀所需的最小寬度。overflow: auto 在內容超出時提供捲動。這樣手機上只移動表格，前後段落仍留在正常位置。
<p id="compare-hint">表格可左右滑動檢視所有方案。</p>
<div class="compare-scroll" role="region"
aria-label="網站方案比較"
aria-describedby="compare-hint" tabindex="0">
<table>
<caption>網站方案比較</caption>
<thead><tr>
<th scope="col">比較項目</th>
<th scope="col">方案A</th>
<th scope="col">方案B</th>
<th scope="col">方案C</th>
</tr></thead>
<tbody><tr>
<th scope="row">適合用途</th>
<td>內容展示</td>
<td>會員內容</td>
<td>產品目錄</td>
</tr></tbody>
</table>
</div>例子用 caption 說明整張表，再以 scope="col"、scope="row" 表達欄與列的關係。不要只把第一列加粗，就當作表頭完成。tabindex="0" 讓容器可接到鍵盤焦點；不同瀏覽器對捲動容器的預設行為可能不同，保留明確可聚焦入口較容易檢查。
.compare-scroll {
max-width: 100%;
max-height: 26rem;
overflow: auto;
}
.compare-scroll table {
min-width: 760px;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.compare-scroll:focus-visible {
outline: 3px solid #2158a8;
outline-offset: 4px;
}760px 是這份三方案示例的起點，不是所有比較表的標準。回到自己資料最長的那一列調整，確認文字不擠，也沒有為短表格增加不必要捲動。高度限制使長表格能在容器裡上下捲；短表格可移除 max-height，讓它自然展開。
固定第一欄與表頭，交界處要有層次
往右移到方案C時，訪客仍需要知道這一列是「用途」還是「管理方式」。第一欄可以用 sticky 貼在容器左邊。若表格本身會上下捲動，表頭則貼在容器頂部；它貼的是自己的捲動容器，並不會自動貼到整個網站頁首。
.compare-scroll thead th {
position: sticky;
top: 0;
z-index: 2;
background: #fce0d2;
}
.compare-scroll tbody th {
position: sticky;
left: 0;
z-index: 1;
background: #fff5ef;
}
.compare-scroll thead th:first-child {
left: 0;
z-index: 3;
}背景色要不透明，否則捲過去的字會透出來，欄名反而看不清。左上角同時屬於表頭與第一欄，需要更高的層級；只讓它靠一般繪製順序，可能被其他格蓋住。
第一欄也不能太寬。在390px畫面上，若固定欄就佔250px，其餘方案只剩一小條。先縮短列名，讓固定欄保留必要資訊，再看剩下的區域是否夠閱讀。內容真的很長時，可把完整說明放在表格下方，而不是一口氣塞進固定欄。
手機上提示放在表格前，不蓋住資料
「左右滑動檢視所有方案」放在表格前方即可。不要把漂浮箭頭壓在表頭或最後一欄，訪客需要比較時，它正好會擋住資料。也別只靠瀏覽器捲軸提示：手機與部分系統會把捲軸隱藏，觸控板也未必一直顯示它。
上圖是窄螢幕比較情境，方案資料為示例。固定欄並非越多越好：手機上通常先保留一個比較項目欄，其他欄讓訪客移動檢視。若固定兩三欄後已佔滿畫面，就應重新安排資料。
用兩種操作，確認沒有卡住
在手機或窄視窗，先向右滑到最後一欄，再向左回來；看第一欄是否穩定、表頭是否清楚，以及最後一格能否完整閱讀。上下移動長表格，確認表頭不遮住第一列內容。再回到桌機用 Tab 聚焦容器，試方向鍵捲動，接著 Tab 離開。
若鍵盤進入後只能在表內打轉，檢查自己是否加了不必要的事件攔截。一般表格不需要把所有格子改成可聚焦，也不需要模仿試算表。表內有連結或按鈕時，繼續驗證那些控制項，不要只驗證容器能動。
修改只套在這張比較表的 class，先保留舊內容與樣式。文字放大後也要再看一次固定欄的寬度。最後請讀者完成一個比較問題，例如「哪個方案需要權限分工？」；找得到答案，才代表表格提示與固定欄一起發揮了作用。
表頭不黏住時，先看哪個容器在捲
把 sticky 加上去卻沒反應，先不要一直調高 z-index。選到表頭，檢視它外層有哪些容器設了 overflow。上面的做法讓比較表在自己的容器內捲動，因此表頭會相對這個容器貼頂；如果你捲的是整個頁面，表格容器本身沒動，看到的行為自然不同。
若希望長表格在容器內上下移動，就保留適當的高度限制。若只要橫向捲動、垂直方向跟著全文，則取消高度限制，也重新決定是否需要固定表頭。不要一邊期待跟著整頁黏住，一邊無意間把它包進另一個裁切容器。
第一欄固定後出現重疊，先確認欄寬。範例對一般資料格保留足夠空間，但列名可以另設較窄寬度；不要給所有格子相同的過大 min-width。再確認 sticky 欄有自己的不透明背景，左上角層級高於表頭與列名，才不會看見兩組文字疊在一起。
比較項目是完整句子時，允許它自然換行。若把整張表都設成 nowrap，第一欄會被最長文字撐寬。反過來，強迫每個中文字斷開也不好讀；先改短標題，單位與補充條件放進欄名或鄰近說明，讓格子仍有完整語意。
在自己的文章預覽，再看前後內容
貼到 CMS 後，用未縮放的手機寬度查看表格前後段落。確認外層正文沒有因表格撐出螢幕、表格下方的連結仍可點，以及焦點框沒有被卡片圓角裁掉。若文章本來有目錄、固定頁首或廣告浮層，往表格附近捲動時一起觀察，不要只看單獨的一張表。
測試資料也要包含最長方案名稱與最長數值。有些表格用「方案A」看來整齊，換成正式產品名後表頭就佔了三行；固定表頭高度會增加，第一個資料列也可能被蓋住。先用真實文案核對，不必靠把字體縮到很小來維持原本高度。
若後續新增一個方案，重新走到最右側。不要假設原本三欄可讀，第四欄就自動可讀。比較表的價值在讓訪客清楚對照相同問題；哪一列需要反覆滑動才能理解，就先整理那一列。
評論0