<th>的核心作用是语义化声明列或行标题，不影响宽度；自适应宽度由table-layout、内容伸缩等共同决定；实现真正自适应需满足：table-layout: auto、不硬设width、对超长文本截断；scope属性无关宽度但关乎可访问性。

<th> 不是用来“撑宽度”或“强制居中”的，它的核心作用是语义化声明：这里是列（或行）的标题。自适应宽度不是它该管的事，而是由表格布局算法、CSS table-layout 和内容自然伸缩共同决定的。

为什么 <th> 宽度不按预期收缩或拉伸

浏览器默认用 table-layout: auto，此时单元格宽度由内容最长项决定，<th> 本身不控制宽度，只影响语义和默认样式。常见现象包括：

• 一列 <th> 文字很长，整列被撑开，其他列被压缩
• 设置了 width: 100px 但没生效，因为父 <tr> 或 <table> 没触发固定布局
• 用了 colspan 的 <th> 拉垮了整行宽度分配逻辑

让 <th> 所在列真正自适应的三个关键点

必须同时满足以下条件，才能实现「内容少时窄、内容多时宽、整体均衡」的效果：

• 给 <table> 设置 table-layout: auto（默认值，不用显式写）——这是自适应的前提
• 避免在 <th> 或 <td> 上硬设 width（HTML 属性或内联 style），否则会干扰自动计算
• 对超长文本做可控截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，防止单个单元格失控

scope 属性对宽度没影响，但忽略它会埋下可访问性雷

scope 不参与任何尺寸计算，但它决定了屏幕阅读器如何把 <th> 和数据单元格关联起来。如果省略或写错，比如该用 scope="col" 却写了 scope="row"，视觉上一切正常，但残障用户听到的可能是“第3行：张三”，而不是“姓名：张三”。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

容易被忽略的是：多级表头（如带分组的列）必须配合 id + headers，不能只靠 scope。例如：

<th id="contact">联系方式</th>
<tr>
  <th scope="col" headers="contact">电话</th>
  <th scope="col" headers="contact">邮箱</th>
</tr>

这种结构下，<th> 的语义完整性比宽度更关键——一旦出问题，测试工具报错、辅助技术失效，修复成本远高于调一个 CSS width。