跳至內容
Astera Technology

闊表格只捲表格,整頁仍可直讀

保留 600px 資料表,窄畫面只在表格區橫捲,整頁不被撐闊。

在表格區橫捲,可到達最右欄。

下載完整個案資料及參考答案 ↓

先看這個例子

表內三欄量度資料,明確闊 600px。外層用 overflow-x:auto,亦有可取得焦點的區域名稱。數值需要欄位對照,本例不把它改成另一種無關卡片。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
320/390px 框查看外層溢出表格闊過外層,可在區內橫捲
960px 框查看同一 600px 表表格放得下,不需水平溢出
最右值捲到相差一欄仍可讀到 800
下載可編輯 CSV ↓

瀏覽器怎樣處理

局部捲動容器保留二維表格,不把整份文件撐闊。被移出視窗的欄位仍須有可用路徑,包括焦點和捲動。本例只驗證這項表格工作,不聲稱整站符合 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 沒超視窗,就足以證明表格讀得完嗎?

查看參考答案

不足夠,還要在局部區域到達最右欄,讀到數值和表頭。

  • 整頁闊度不超框,同時分開量表格和外層。
  • 測真正區內捲動及最右欄可達情況。

原始例子檔案

相關資源