th 的 background-color 不生效，主要是因继承样式、重置 CSS 或父级 table 背景干扰；需检查 computed 样式、避免 tr/table 覆盖，并配合 border-collapse: collapse 保证背景铺满。
th 的 background-color 不生效？大概率是被继承样式、重置 CSS 或父级 table 的层叠顺序干扰了，不是颜色写错了。
为什么直接给 th 写 background-color 没反应？
浏览器渲染时，th 默认是透明背景（background-color: transparent），但一旦页面加载了全局重置样式（比如 normalize.css 或某些 UI 框架），它可能被设为白色或浅灰；更常见的是，table 自身设置了 background-color，而 th 又没显式覆盖，导致视觉上“没变色”。
- 用开发者工具检查
th元素，看 computed 样式里background-color是否被划掉，或显示为rgba(0, 0, 0, 0)/transparent - 临时加一句
th { background-color: #3498db !important; }验证是否被其他规则压制 - 确认没有在
table或tr上设置更高优先级的背景色（比如tr:hover覆盖了常态）
th 背景色必须配合 border-collapse 才干净
如果表格用了 border-collapse: separate（默认），th 边框之间会有空隙，背景色只填满单元格内容区；换成 border-collapse: collapse 后，边框合并，th 背景能严丝合缝铺满，视觉更统一。
- 推荐组合：
table { border-collapse: collapse; }+th { background-color: #2c3e50; color: white; padding: 12px; } - 若坚持用
separate，记得设border-spacing: 0，否则间隙会漏出底层背景 - 别在
th上同时设border和半透明背景——边框颜色可能和背景混色，显得发灰
怎么让表头背景响应 hover 或状态变化？
纯色背景容易做，但交互反馈要小心层级：hover 效果必须作用在 th 本身，而不是包裹它的 tr（因为 tr 的背景会盖住 th 的 padding 区域）。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
th:hover { background-color: #1a252f; } - 错误写法：
tr:hover th { ... }—— 这样 hover 时整个行变色，但th内边距区域可能不响应 - 如果表头含图标或按钮，建议用
th > *控制子元素颜色，避免背景色与文字/图标冲突
真正难的不是写那行 background-color，而是确认它最终渲染在哪一层——th、tr、thead、还是 table？开发者工具里点开每一层的 computed 样式，比猜快得多。
