通过 writing-mode: vertical-lr 与 text-orientation: upright 组合，可将表头文字垂直排列且保持正向可读，无需手动插入 <br> 标签，语义清晰、响应友好、维护性强。
通过 `writing-mode: vertical-lr` 与 `text-orientation: upright` 组合，可将表头文字垂直排列且保持正向可读，无需手动插入 `
` 标签，语义清晰、响应友好、维护性强。
在 HTML 表格中实现垂直表头（即每个字母独占一行、自上而下排列），传统做法常依赖在 <th> 中硬编码 <br> 标签（如 M<br/>A<br/>T<br/>H<br/> 1<br/>0<br/>1），但这严重破坏语义结构，增加维护成本，且不利于无障碍访问与国际化支持。
现代 CSS 提供了更优雅的解决方案：writing-mode 与 text-orientation 属性协同工作，可原生实现垂直排版。
✅ 推荐写法如下：
th {
writing-mode: vertical-lr; /* 文字从上到下、从左到右书写（适用于竖排中文/英文） */
text-orientation: upright; /* 强制每个字符正立显示，避免旋转90° */
padding: 8px 4px; /* 可选：微调内边距以优化视觉间距 */
text-align: center; /* 可选：居中对齐提升可读性 */
}对应简洁语义化的 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<table>
<tr>
<th>MATH 101</th>
<th>HIST 101</th>
<th>PHYS 101</th>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
</table>? 注意事项：
- vertical-lr 在主流浏览器（Chrome 48+、Firefox 41+、Safari 14.1+、Edge 79+）中已全面支持；旧版 Safari 需加 -webkit-writing-mode 前缀（仅必要时兼容）；
- text-orientation: upright 是关键——若省略，英文字母会默认旋转90°，导致阅读困难；
- 该方案天然支持空格与数字（如 "MATH 101" 中的空格和数字均正常垂直排列）；
- 如需适配 RTL（如阿拉伯语）或复杂排版，可结合 direction 和 unicode-bidi 进一步控制，但本例中无需额外配置。
? 小结：告别 <br> 拆分，拥抱语义化 CSS。writing-mode 不仅提升代码质量，还为响应式设计（如窄屏下自动切换表头方向）预留扩展空间——这才是现代前端应有的实现方式。
