先看這個例子
表內三欄量度資料,明確闊 600px。外層用 overflow-x:auto,亦有可取得焦點的區域名稱。數值需要欄位對照,本例不把它改成另一種無關卡片。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 320/390px 框 | 查看外層溢出 | 表格闊過外層,可在區內橫捲 |
| 960px 框 | 查看同一 600px 表 | 表格放得下,不需水平溢出 |
| 最右值 | 捲到相差一欄 | 仍可讀到 800 |
瀏覽器怎樣處理
局部捲動容器保留二維表格,不把整份文件撐闊。被移出視窗的欄位仍須有可用路徑,包括焦點和捲動。本例只驗證這項表格工作,不聲稱整站符合 WCAG。
藏起溢出,會失去查看欄位的路徑
反例把外層改成 overflow-x:hidden。
<style>body{margin:8px}</style>
<style>.wrap{overflow-x:hidden}.wrap table{width:600px;max-width:none}</style><section class="wrap"><table><tr><th>原始檔</th><th>縮減後</th><th>相差</th></tr><tr><td>2000</td><td>1200</td><td>800</td></tr></table></section>窄框內表格仍較闊,使用者捲動卻被 hidden 設定截住。程式可改 scrollLeft,不代表人有可用路徑。
試着修正
整頁 scrollWidth 沒超視窗,就足以證明表格讀得完嗎?
查看參考答案
不足夠,還要在局部區域到達最右欄,讀到數值和表頭。
- 整頁闊度不超框,同時分開量表格和外層。
- 測真正區內捲動及最右欄可達情況。