最可靠做法是直接为<th>写CSS并明确设置scope属性。需显式定义font-weight、中文字体栈、white-space截断，按scope="col"和scope="row"差异化样式，用clamp()控制响应式字号，多级表头加class避免继承混乱，补全scope保障可访问性与样式精准性。
直接给 <th> 写 CSS 样式最可靠
别试图用 <font> 标签或过时的 align、color 属性——这些在 HTML5 里已被废弃，浏览器兼容性差，且无法控制字重、行高、字体回退等关键细节。
正确做法是单独选中 <th> 元素设置样式。它默认加粗居中，但这个行为来自浏览器 UA 样式，不是语义强制的，必须显式覆盖才能保证跨浏览器一致。
-
<th>的font-weight默认是bolder或600，但不同浏览器可能不同；建议明确写成font-weight: bold或font-weight: 700 - 中文场景下，
font-family必须包含中文字体，例如font-family: "Microsoft YaHei", "PingFang SC", sans-serif；只写Arial会导致 fallback 到系统默认无衬线字体，显示效果不可控 - 如果表头内容较长，
white-space: nowrap+text-overflow: ellipsis配合overflow: hidden才能安全截断，仅靠width不起作用
用 scope 属性区分列头和行头，再分别设字体
当表格有复合结构（比如左上角是空单元格，首行是列头，首列是行头），单靠 <th> 选择器会误伤。这时必须依赖 scope 属性做精准定位。
例如：<th scope="col">姓名</th> 和 <th scope="row">平均分</th> 是两类语义完全不同的表头，字体大小、颜色、对齐方式很可能需要差异化处理。
立即学习“前端免费学习笔记（深入）”；
-
th[scope="col"]适合设更大字号（如16px）、深色文字（#222）、text-align: center -
th[scope="row"]更倾向左对齐（text-align: left）、稍小字号（14px）、浅灰文字（#555）以降低视觉权重 - 没写
scope的<th>会被所有规则命中，容易造成样式污染，务必补全
响应式表格里，<th> 字体缩放要避开 viewport 缩放陷阱
移动端表格常配合 meta viewport 使用，但直接用 vw 或 % 设 font-size 很容易导致小屏下文字过小、大屏下过大，且与系统字体缩放设置冲突。
更稳妥的方式是用 clamp() 或媒体查询分段控制：
- 推荐写法：
font-size: clamp(12px, 0.8rem, 16px)—— 在 12px 到 16px 之间随容器自适应，但不会跌破最小可读尺寸 - 避免用
font-size: 3vw：iPhone 竖屏时可能缩到 10px 以下，用户根本看不清 - 如果表格被包裹在
overflow-x: auto容器里，<th>的字体大小不能依赖父容器宽度，否则横向滚动时字体忽大忽小
多级表头（colspan/rowspan）下，字体继承容易出错
带合并单元格的表头结构（比如“成绩”大类下分“语文”“数学”“英语”三列），顶层 <th colspan="3"> 和底层 <th> 的字体样式不会自动继承，CSS 选择器优先级容易混乱。
典型问题：顶层表头设置了 font-size: 18px，但子级 <th> 因为用了 th:first-child 这类通用选择器，被覆盖成 14px，视觉层级断裂。
- 解决方案：给多级表头加 class，比如
<th class="header-level-1" colspan="3">和<th class="header-level-2">，然后分别写.header-level-1和.header-level-2 - 不要依赖嵌套关系（如
thead th th）——这种结构并不存在，<th>是平级兄弟元素 - 如果用 CSS-in-JS 或 Shadow DOM，注意样式作用域是否泄漏，
<th>的字体可能被外部 reset.css 强制重置
scope 属性缺失带来的可访问性隐患和样式失控——它不直接影响视觉，但会让屏幕阅读器读错表头归属，也破坏了你精心设计的字体分层逻辑。 
