必须手写thead和tbody标签，因浏览器隐式补全的tbody不在DOM中；用position: sticky固定表头需父容器设max-height和overflow-y: auto，且thead加top: 0、z-index和background。
固定 HTML 表格首行（即表头）不是加个 thead 就完事——它只是语义标签，不自带固定能力。真正起效的是 CSS 布局控制，核心在于让 thead 和 tbody 在渲染层分离、滚动行为解耦。
为什么 thead 必须显式写出？
浏览器会自动补全隐式 tbody，但这个补全是“渲染层补全”，DOM 中并不存在真实节点：
-
document.querySelector('tbody')返回null -
table.tBodies.length为0，尤其在 SSR 或严格模式下直接失效 -
tbody tr:hover这类 CSS 选择器完全不匹配 - 用
innerHTML替换数据时，旧行不会被清除，新旧内容混杂
所以哪怕只有一行表头，也必须手写 <thead><tr><th>...</th></tr></thead> 和 <tbody><tr><td>...</td></tr></tbody>。
position: sticky 是最简方案，但有硬性前提
现代浏览器（Chrome 51+、Firefox 59+、Safari 6.1+）支持 position: sticky，但它不是“独立生效”的属性，依赖父容器的滚动边界：
立即学习“前端免费学习笔记（深入）”；
- 外层容器（如
<div class="table-container">）必须设max-height和overflow-y: auto -
thead或th加position: sticky; top: 0; z-index: 10; background: white（z-index和background缺一不可，否则滚动时被盖住或透底） - 不能给
thead设display: block，否则语义丢失、屏幕阅读器无法识别表头 - 父容器不能有
overflow: hidden，否则直接禁用sticky
tbody 滚动时列宽错位？问题出在 display 和 width 同步
一旦 tbody 要滚动，常见做法是设 display: block，但这会让它脱离表格布局流，th 和 td 的列宽不再自动对齐：
- 必须配合
table-layout: fixed，且table本身要有明确宽度（如width: 100%） - 列宽基准只能来自第一行：
<col width="120">（放在<table>开始后、<thead>前），或<th width="120">（内联或样式），<td>的宽度会被忽略 - 如果列数多、宽度不一，
<col>是唯一语义正确、优先级最高的方式；用 JS 动态读取thead th宽度再同步到tbody td也可行，但要注意节流
IE11 及更老浏览器怎么处理？
position: sticky 在 IE 全面不支持，降级方案不是“重写整个逻辑”，而是务实妥协：
- 把
thead提到表格外，单独用一个<table>渲染表头，另一个<table>渲染数据 - 用
table-layout: fixed+ 预设列宽（如th:nth-child(1) { width: 120px; }）强制对齐 - 避免 JS 实时监听 resize —— 改用
@media查询做断点适配，或干脆小屏切卡片列表
列宽同步和滚动容器的 overflow 边界是实际项目中最容易漏掉的两个点，调的时候卡半天，往往就差一行 max-height 或一个 background。
