01 · 保留表头语义
<th scope="col">内存/GB</th>scope 描述关联方向。固定位置是视觉效果，不能替代 th 与 scope。
进阶观察 · 从本课知识向前一步
滚动时，怎样不丢失数据的含义？
向下、向右滚动电脑参数表，观察表头和型号列。数据为教学虚构，不构成购买建议。
先看效果
02 · 滚动容器
.table-scroll { overflow: auto; max-height: 230px; }内容超出时提供滚动，而不是裁掉右侧参数。
03 · 让表头保持可见
thead th { position: sticky; top: 0; }sticky 是 CSS 定位方式：在滚动到指定边界后保持可见。后续 CSS 课再深入其布局条件。
思考
如果把 th 全部换成 td，再用 CSS 做出完全相同的颜色和固定效果，表格的语义也相同吗？
展开参考分析
不同。外观相同并不代表表头与数据的关联相同。应先保留正确的表格结构，再增强滚动阅读体验；固定表头也不应遮挡数据。
成熟增强方案：不依赖表格插件。近期 Web 互操作工作仍重视无障碍树一致性，视觉效果不是唯一验收项。
完整源码：展开、修改与运行
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>滚动时，怎样不丢失数据的含义？</title>
<style>
body { margin:16px; color:#183347; background:white; font:20px/1.5 "Times New Roman",SimSun,serif; }
h1,h2 { font-family:"Times New Roman",SimHei,sans-serif; }
button,input,select { font:inherit; max-width:100%; }
button { margin:4px 0; cursor:pointer; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:18px/1.5 Consolas,SimSun,monospace; }
:focus-visible { outline:3px solid #b56220; outline-offset:3px; }
.table-scroll { overflow:auto; max-height:230px; max-width:440px; }
table { border-spacing:0; min-width:620px; }
th, td { padding:14px; border-bottom:1px solid #b6c9cc; text-align:left; }
thead th { position:sticky; top:0; background:#e1f1ed; z-index:2; }
tbody th { position:sticky; left:0; background:#fff1dc; }
thead th:first-child { left:0; z-index:3; }
</style>
</head>
<body>
<div class="table-scroll" tabindex="0" role="region" aria-label="可滚动的电脑参数表"><table><caption>电脑参数对照（虚构数据）</caption><thead><tr><th scope="col">型号</th><th scope="col">价格/元</th><th scope="col">内存/GB</th><th scope="col">存储/GB</th></tr></thead><tbody><tr><th scope="row">方案 1</th><td>3999</td><td>16</td><td>512</td></tr><tr><th scope="row">方案 2</th><td>4499</td><td>32</td><td>1024</td></tr><tr><th scope="row">方案 3</th><td>4999</td><td>16</td><td>512</td></tr><tr><th scope="row">方案 4</th><td>5499</td><td>32</td><td>1024</td></tr><tr><th scope="row">方案 5</th><td>5999</td><td>16</td><td>512</td></tr><tr><th scope="row">方案 6</th><td>6499</td><td>32</td><td>1024</td></tr><tr><th scope="row">方案 7</th><td>6999</td><td>16</td><td>512</td></tr><tr><th scope="row">方案 8</th><td>7499</td><td>32</td><td>1024</td></tr></tbody></table></div>
</body>
</html>