通过 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; /* 水平居中对齐（垂直方向由 writing-mode 控制） */
}? 完整示例：
立即学习“前端免费学习笔记（深入）”；
<table border="1" style="border-collapse: collapse;">
<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 87+、Firefox 41+、Safari 14.1+、Edge 79+）中已广泛支持；旧版 Safari 需加 -webkit-writing-mode 前缀（但现代项目通常可忽略）。
- 若需兼容从右向左书写的语言（如阿拉伯语），可选用 vertical-rl，但对英文课程代码推荐 vertical-lr。
- text-orientation: upright 是关键——若省略，英文字母将被顺时针旋转90°，失去可读性。
- 避免在 <th> 中混用 <br> 或空格控制换行，CSS 方案天然支持响应式缩放与字体大小调整。
? 进阶提示：
如需统一控制所有表头高度或对齐基线，可配合 line-height（设为 1）或 vertical-align: middle 进一步优化；对于移动端小屏，建议搭配 @media 临时切回水平布局以保障可读性。
这一方案不仅提升了代码可维护性与语义正确性，也体现了现代 CSS 在排版控制上的强大能力。
