通过 writing-mode: vertical-lr 和 text-orientation: upright 两个 CSS 属性，可将表头文字自动垂直排布为单列、自上而下、正向显示，无需手动插入 <br> 标签，语义清晰且响应友好。
通过 `writing-mode: vertical-lr` 和 `text-orientation: upright` 两个 css 属性，可将表头文字自动垂直排布为单列、自上而下、正向显示，无需手动插入 `
` 标签，语义清晰且响应友好。
在传统 HTML 表格中，若需让表头（如“MATH 101”）以每字母/数字独占一行的方式垂直显示，开发者常误用 <br> 拆分内容，但这会破坏语义结构、影响可访问性（如屏幕阅读器误读换行符），也难以维护与国际化适配。
现代 CSS 提供了更优雅的解决方案：writing-mode 控制文本流方向，text-orientation 控制单个字符的朝向。只需为 <th> 元素添加以下样式：
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 前缀（但 Safari 14.1+ 已无需）。
- 若表头含中文、日文等竖排习惯文字，text-orientation: mixed 或 text-orientation: sideways 可能更合适，但对英文课程代码（如 “MATH 101”），upright 是最佳选择。
- 避免在 th 中嵌套 <div> 或 <span> 干预布局——CSS 垂直模式应直接作用于文本节点，确保渲染一致性。
✅ 总结：抛弃 <br> 硬换行，拥抱标准 CSS 排版能力。writing-mode + text-orientation 不仅代码更简洁、结构更健壮，也为后续适配 RTL（如阿拉伯语）或响应式高度调整（如媒体查询中切换回水平显示）预留了灵活空间。
