HOWTO · HTML
使 HTML 表格可滾動
使用 CSS 溢出，讓長的 HTML 表格在固定高度的容器內捲動。在保留原生表格標記與鍵盤存取的同時，選擇垂直與水平捲動。
本頁內容
若不想讓較長的 HTML 表格把頁面撐得過長，可將具備語意結構的表格放在高度受限的容器中，並設定 overflow-y: auto。當容器內容超過高度限制時，容器就會垂直捲動；表格本身仍保有原本的列與欄結構。
使用 CSS 讓 HTML 表格垂直捲動
這個完整頁面使用高度為 200 像素的容器，並在其中放入具有表頭和表身的原生表格。表格列數足以讓內容超出容器高度，讀者因此可以在表格區域內捲動。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollable table</title>
<style>
.table-scroll {
max-height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<div class="table-scroll" role="region" aria-label="Employee directory" tabindex="0">
<table>
<thead>
<tr><th scope="col">Name</th><th scope="col">Age</th><th scope="col">Country</th></tr>
</thead>
<tbody>
<tr><td>John Doe</td><td>30</td><td>USA</td></tr>
<tr><td>Jane Smith</td><td>25</td><td>Canada</td></tr>
<tr><td>Sam Wilson</td><td>28</td><td>UK</td></tr>
<tr><td>Emily Johnson</td><td>35</td><td>Australia</td></tr>
<tr><td>Michael Brown</td><td>40</td><td>Germany</td></tr>
<tr><td>Linda Davis</td><td>22</td><td>France</td></tr>
<tr><td>James Garcia</td><td>29</td><td>Spain</td></tr>
<tr><td>Patricia Martinez</td><td>31</td><td>Mexico</td></tr>
<tr><td>Robert Wilson</td><td>38</td><td>Italy</td></tr>
<tr><td>Jessica Lee</td><td>27</td><td>Netherlands</td></tr>
</tbody>
</table>
</div>
</body>
</html>
max-height 會限制容器的高度，而 overflow-y 則控制表格內容超出容器時的行為。tabindex="0" 讓鍵盤使用者可以移至這個區域；將焦點移到該處，再用方向鍵確認是否能捲動。區域標籤則能為輔助科技提供上下文。請保留 <table>、<thead>、<tbody> 和表頭儲存格，讓瀏覽器與輔助科技保有表格中的關聯資訊。
選擇 auto 或 scroll 處理垂直溢位
當內容超出容器時，使用 overflow-y: auto 讓捲動機制在需要時出現。若表格列能完整放入容器，就不必預留捲動條空間。overflow-y: scroll 則會要求提供捲動機制，即使目前內容放得下也一樣；不過，是否顯示捲動條仍取決於作業系統和瀏覽器。無論選擇哪一種，都應將溢位規則設在容器上，而不是個別列上。必須設定高度或最大高度，才能限制垂直空間；否則容器可能隨表格一起增高，也就不需要在容器內垂直捲動。
若要快速複製容器規則，可以執行下方的 JavaScript 範例。它會輸出上方使用的 CSS 宣告；請依照可視區域調整高度。
const rule = [
".table-scroll {",
" max-height: 200px;",
" overflow-y: auto;",
"}"
].join("\n");
console.log(rule);
.table-scroll {
max-height: 200px;
overflow-y: auto;
}
保留表格語意與鍵盤操作
顯示表格資料時，請使用真正的表格元素，不要以通用的 CSS Grid 儲存格取代。Grid 適合用於版面配置，但一組 div 元素不會自動具備資料表格的表頭與儲存格關聯。範例會將可捲動的容器標示為區域，並讓它能透過 Tab 鍵取得焦點。請用鍵盤測試：按 Tab 移至已標示的區域，以方向鍵捲動，再繼續按 Tab 移動。原生表格標記已提供表格語意，因此不要再加上 ARIA 表格角色。
加入水平捲動與 Bootstrap 樣式
如果欄位寬度超出可用空間，請在 .table-scroll 加上 overflow-x: auto；如此一來，容器除了垂直捲動，也能水平捲動。請讓表格維持足以呈現各欄位的寬度，不要把文字擠得難以閱讀。請在實際使用表格的窄視窗中檢視頁面，確認每個欄位都能移至可視範圍。
如果專案已載入 Bootstrap，可以使用 table 和 table-bordered 等類別為同一個語意表格設定樣式。這些類別會影響呈現方式；提供捲動行為的仍是受限高度的容器及其 CSS 溢位規則。這種做法能明確設定捲動行為，也讓表格標記無論有沒有 Bootstrap 都能保持實用。