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 则会要求提供滚动机制，即使内容目前没有超出；不过，滚动条是否可见取决于操作系统和浏览器。无论选择哪种方式，都应将溢出规则设在容器上，而不是单独设在各行上。要限制垂直高度，必须设置 height 或 max-height；否则容器可以随表格增高，也就不需要在内部垂直滚动。
如需快速复制容器规则，可以运行这个简短的 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。原生表格标记已经提供表格语义，因此不要再为它添加 ARIA 表格角色。
添加水平滚动和 Bootstrap 样式
如果列宽超出可用空间，可为 .table-scroll 添加 overflow-x: auto；这样容器除了垂直滚动，也可以水平滚动。应让表格宽度足以容纳各列，避免文字被挤得难以阅读。请在实际使用表格的窄视口中查看页面，并确认每一列都能访问。
如果项目已经载入 Bootstrap，可以用 table 和 table-bordered 等类为同一个语义化表格设置样式。这些类只影响呈现方式；滚动行为仍由有高度限制的容器及其 CSS 溢出规则提供。这样可以明确控制滚动行为，同时让表格标记在使用或不使用 Bootstrap 时都保持实用。