必须用<thead>和<tbody>明确分离表头与表体，否则CSS选择器（如thead th）无法匹配、样式失效，且屏幕阅读器无法识别表头语义；<th>仅标识单元格类型，不定义结构层级，只有被<thead>包裹的<tr>才被浏览器视为表头行，支持固定、样式隔离及无障碍访问。
表头和表体必须用 <thead> 和 <tbody> 明确分离，否则 CSS 选择器无法精准作用，样式容易错乱或失效。
为什么必须用 <thead> 和 <tbody> 而不是只靠 <th>
<th> 只是语义上标记“这是表头单元格”，它不定义结构层级；浏览器渲染时仍把所有 <tr> 当作同级行处理。只有包裹在 <thead> 里的 <tr> 才会被 CSS 识别为“表头行”，才能单独加背景、固定高度、悬停禁用等样式。否则你写的 thead th 选择器根本不会匹配到任何元素。
- 常见错误：只写
<tr><th>姓名</th><th>年龄</th></tr>，没包<thead>—— 这时thead th规则完全无效 - 兼容性注意：IE8+ 支持
<thead>/<tbody>，但若遗漏<tbody>，部分旧版 Safari 会自动补全，导致 DOM 结构意外嵌套 - 辅助技术依赖此结构：屏幕阅读器靠
<thead>判断哪些行是标题，缺失则整表语义断裂
thead 和 tbody 的典型样式差异设置
核心是利用选择器层级区分，避免全局污染。重点不是“怎么好看”，而是“怎么稳定可控”。
- 表头固定背景 + 字体加粗：
thead th { background-color: #f8f9fa; font-weight: 600; } - 表体隔行变色（注意从第一行数据开始）：
tbody tr:nth-child(odd) { background-color: #fff; } tbody tr:nth-child(even) { background-color: #f5f7fa; } - 表头文字居中，表体左对齐：
thead th { text-align: center; } tbody td { text-align: left; } - 禁止表体 hover 影响表头：
tbody tr:hover { background-color: #eef2ff; }—— 这条规则不会触发<thead>行
边框合并时表头/表体的 border 冲突怎么解
当用了 border-collapse: collapse，<thead> 和 <tbody> 的 border 会互相覆盖，尤其表头底部边框常被表体顶部边框吃掉。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：给
thead th单独设border-bottom，同时给tbody tr:first-child td设border-top: none - 更稳妥写法：
thead th { border-bottom: 2px solid #333; } tbody tr:first-child td { border-top: 1px solid transparent; }—— 用透明边框占位，避免视觉跳变 - 别用
border简写覆盖整个单元格：那样会把表头底边和表体顶边都画出来，反而出现双线
响应式表格里表头样式容易失效的点
当表格被 overflow-x: auto 包裹或启用横向滚动时，<thead> 默认随内容一起滚动，失去“固定表头”效果，样式还在，但功能已崩。
- 真正起作用的是
position: sticky，不是<thead>标签本身：thead th { position: sticky; top: 0; z-index: 10; } - 必须确保父容器有明确高度或 max-height，否则 sticky 不触发
- 移动端 Safari 对
sticky在<table>内支持不稳定，稳妥方案是用 JS 监听滚动 + 动态 clone 表头，或改用 flex/grid 模拟表格布局
最易被忽略的是：即使写了 <thead>，如果后续 JS 动态插入新行却直接 append 到 <table>，而不是 <tbody>，新行就脱离了样式作用域 —— 这类 bug 很难肉眼发现，得查 DOM 结构。
