默认加粗但视觉未居中，是因text-align: center仅作用于行内内容宽度，受表宽、table-layout等影响而偏左；必须显式声明text-align: center和font-weight: bold，避免依赖默认值或被重置样式覆盖。
为什么 <th> 默认加粗却没居中？
<p>浏览器对 <code><th> 的默认样式是 <code>font-weight: bold 和 text-align: center，但这个居中仅作用于**行内内容宽度**；一旦单元格因内容过短、父表宽度过大或设置了 table-layout: fixed，视觉上就容易“偏左”。这不是 bug，而是 CSS 表格渲染规则导致的常见误解。
<th> 居中必须显式写 <code>text-align: center
<th> 居中必须显式写 <code>text-align: center
别依赖默认值——尤其在重置样式（如使用 Normalize.css 或自定义 reset）后，默认 text-align 可能被覆盖。最稳妥的做法是主动声明：
th {
font-weight: bold;
text-align: center;
}
- 单独给某列加粗+居中？用类名更安全：
<th class="header-bold-center"> + 对应 CSS <li>避免只写 <code>text-align: center却漏掉font-weight：某些旧版 Safari 或邮件客户端会忽略<th> 的默认加粗 <li>如果用了 <code>display: flex或display: grid模拟表格布局，<th> 的语义和默认样式完全失效，必须全手动设置 <h3>加粗失效的三个典型场景</h3> <p>加粗不出现，往往不是没写 <code><th>，而是被更高优先级样式压住了： <ul> <li>父元素设置了 <code>font-weight: normal !important（比如某些 UI 框架的全局重置） - 继承了来自
body或table的font-weight: 400，且未提高选择器权重 - 用了 Web 字体但
font-weight: bold对应的字重未加载（例如只加载了 400，没加载 700）
排查时直接在 DevTools 中检查 computed 样式里的 font-weight 值，看是否为 700 或 bold。
响应式表格里 <th> 居中突然错位？
<p>当表格在小屏下变成横向滚动或转为卡片式布局时，<code>text-align: center 仍生效，但单元格宽度可能被压缩到内容宽度以下，文字换行后“居中”就只作用于每行，而非整体视觉中心。
- 解决方法：加
white-space: nowrap 防止意外换行（适合短表头）
- 更健壮的方案：用
th { min-width: 120px; } 控制最小宽度，再配合 text-align: center
- 极端情况（如移动端竖排表头），需用
writing-mode: vertical-rl 并重新校准对齐方式
white-space: nowrap 防止意外换行（适合短表头）th { min-width: 120px; } 控制最小宽度，再配合 text-align: center
writing-mode: vertical-rl 并重新校准对齐方式真正麻烦的不是怎么写，而是不同设备、不同字体度量下，“视觉居中”和“CSS 居中”的像素级偏差——这点常被忽略，直到设计验收时才被挑出来。
