的核心作用是语义化声明列或行标题，不影响宽度；自适应宽度由table-layout、内容伸缩等共同决定；实现真正自适应需满足：table-layout: auto、不硬设width、对超长文本截断；scope属性无关宽度但关乎可访问性。
<th> 不是用来“撑宽度”或“强制居中”的，它的核心作用是语义化声明：这里是列（或行）的标题。自适应宽度不是它该管的事，而是由表格布局算法、CSS <code>table-layout 和内容自然伸缩共同决定的。
为什么 <th> 宽度不按预期收缩或拉伸
<p>浏览器默认用 <code>table-layout: auto，此时单元格宽度由内容最长项决定，<th> 本身不控制宽度，只影响语义和默认样式。常见现象包括：
<ul><li>一列 <code><th> 文字很长，整列被撑开，其他列被压缩
<li>设置了 <code>width: 100px 但没生效，因为父 <tr> 或 <code><table> 没触发固定布局
<li>用了 <code>colspan 的 <th> 拉垮了整行宽度分配逻辑
<h3>让 <code><th> 所在列真正自适应的三个关键点
<p>必须同时满足以下条件，才能实现「内容少时窄、内容多时宽、整体均衡」的效果：</p>
<ul><li>给 <code><table> 设置 <code>table-layout: auto（默认值，不用显式写）——这是自适应的前提
<th> 或 <code><td> 上硬设 <code>width（HTML 属性或内联 style），否则会干扰自动计算
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，防止单个单元格失控
scope 属性对宽度没影响，但忽略它会埋下可访问性雷
scope 不参与任何尺寸计算，但它决定了屏幕阅读器如何把 <th> 和数据单元格关联起来。如果省略或写错，比如该用 <code>scope="col" 却写了 scope="row"，视觉上一切正常，但残障用户听到的可能是“第3行：张三”，而不是“姓名：张三”。
容易被忽略的是：多级表头（如带分组的列）必须配合 id + headers，不能只靠 scope。例如：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<th id="contact">联系方式</th> <tr> <th scope="col" headers="contact">电话</th> <th scope="col" headers="contact">邮箱</th> </tr>
这种结构下，<th> 的语义完整性比宽度更关键——一旦出问题，测试工具报错、辅助技术失效，修复成本远高于调一个 CSS width。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
