th 必须单独写选择器并显式设置样式，因其默认加粗居中、权重与 td 不同；需设 background-color 保障 sticky 表头可读性；font-size 和 padding 应比 td 略大以增强视觉引导；border-collapse: collapse 必须在 table 上声明，确保 th 边框独立渲染。

th 标签必须单独写选择器，不能靠继承

很多人试图用 table td 和 table th 一起设样式，结果发现 th 没生效或被覆盖。这是因为浏览器对 th 有默认加粗+居中行为，且其 specificity（权重）和渲染优先级与 td 不同。

真正有效的做法是：显式声明 th 的样式规则，并确保它不被更宽泛的选择器（比如 table * { ... }）意外覆盖。

• 写 th { font-weight: normal; text-align: left; } 才能取消默认加粗和居中
• 避免用 td, th { ... } 统一设背景色——th 需要更高对比度，td 通常要留白呼吸感
• 如果用了 border-collapse: collapse，th 的 border-bottom 很容易被里第一行的 td 边框盖住，建议给 th 单独加 border-bottom: 2px solid #333

  background-color 是 sticky 表头的刚需

  当用 position: sticky 固定表头时，滚动过程中 th 会悬停在内容上方。如果不设 background-color，下方 tr 的背景色会透上来，造成闪烁或文字难读。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • th 必须有明确的 background-color，哪怕只是 #fff
  • 别依赖父容器背景——sticky 元素脱离普通文档流后，父背景不自动继承
  • 若表格整体有斑马纹（tbody tr:nth-child(even)），th 的背景色必须与之形成足够对比，否则视觉层级混乱

  font-size 和 padding 要比 td 大 1–2px

  表头承担“锚点”作用，需要更强的视觉引导力。直接复用 td 的字号和内边距会让表头存在感弱、点击区域小，尤其在移动端。

  • th 的 font-size 建议比 td 大 1px 或 2px（如 td { font-size: 14px; } → th { font-size: 16px; }）
  • th 的 padding 推荐比 td 多 4px 垂直空间（如 td { padding: 8px 12px; } → th { padding: 12px 12px; }）
  • 慎用 line-height 单独调高——它可能撑开 tr 高度，导致 sticky 区域错位

  border-collapse 影响 th 边框渲染逻辑

  没加 border-collapse: collapse 时，th 的边框会和相邻 td 边框叠加，看起来粗两倍、不对齐，甚至让 sticky 表头底部出现断层。

  • 必须在 table 选择器第一行写 border-collapse: collapse，不能靠后代选择器覆盖
  • 设完 collapse 后，th 的 border 才真正“属于”自己，不会被 td 干扰
  • 如果要用虚线或点线边框，优先设在 th 上，而不是整个 table ——td 通常不需要边框，靠间距和背景区分更清爽

  真正卡住人的不是不会写 th { color: red; }，而是没意识到 th 在 sticky、border-collapse、nth-child 这些上下文里会表现异常——这些细节不验证，样式再好看也经不起滚动和缩放。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！