必须用 thead 和 tbody 分离表头与主体样式，因 tr:first-child 无法应对多行表头、动态插入等场景，且语义化、打印、无障碍及兼容性均依赖原生标签结构。
可以，而且必须用 thead 和 tbody 才能真正分离表头与主体的样式——仅靠 tr:first-child 或类名模拟会出问题。
为什么不能只用 tr:first-child 控制表头颜色
很多表格动态生成时，thead 里可能有多个 tr（比如带合并单元格的复杂表头），或服务端渲染时没加 thead 标签但前端 JS 又插入了新行——这时 tr:first-child 会错配到第一行数据上。
-
thead是语义化容器，浏览器和读屏器依赖它理解结构 - CSS 选择器
thead tr精准锁定所有表头行，不受 DOM 顺序干扰 - 打印样式、导出 PDF 工具（如 jsPDF + autoTable）也依赖
thead区分重复页眉
给 thead 和 tbody 设置不同背景色的写法
直接写 CSS 规则就行，注意优先级和继承关系：
- 避免用
!important，改用更具体的选择器，比如table.my-table thead th - 如果表头单元格是
th，主体是td，别忘了分别设置文字颜色和边框，否则视觉不统一 - 某些 UI 框架（如 Bootstrap）会给
tbody tr:hover加背景色，会覆盖你设的tbody背景色，需额外重置
示例：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
table thead th {
background-color: #2c3e50;
color: white;
}
table tbody td {
background-color: #ecf0f1;
}
当表格有斑马纹（zebra striping）时怎么兼容表头
斑马纹常用 tbody tr:nth-child(even)，但它默认不影响 thead ——这是好事。但容易踩的坑是：如果写了 tr:nth-child(odd) 这种全局选择器，就会把 thead 的第一行也染上色。
- 务必限定在
tbody内：用tbody tr:nth-child(even)，而不是tr:nth-child(even) - 如果表头有多行，且想让第二行表头用浅色背景，就单独写
thead tr:nth-child(2) th - 移动端缩放时，部分旧版 Safari 对
nth-child在thead中的支持不稳定，稳妥起见可加类名控制
IE8–IE11 下 thead/tbody 样式失效的常见原因
不是语法问题，而是文档模式或盒模型导致的“看起来没生效”：
- 确保页面有正确 doctype：
<!DOCTYPE html>，否则 IE 进入怪异模式，thead渲染异常 - IE 对
border-collapse: collapse下的thead单元格背景渲染有 bug，可尝试加position: relative强制重绘 - 如果用了 flex 或 grid 布局包裹表格，IE11 不支持，会导致
tbody高度塌陷，背景色“消失”——这种场景老老实实用display: table回退
最麻烦的其实是合并单元格（colspan/rowspan）混用时，thead 和 tbody 的行高计算会错位，这时候颜色分界线看起来就“偏了”。得靠 line-height 和 vertical-align 微调，而不是换选择器。
