如何用CSS实现每行仅显示单个字母的HTML表格垂直表头（无需<br>标签）

当然可以用纯CSS实现垂直表头，不用手动插入<br>标签，既保持HTML结构干净，又方便维护。下面给你两种实用方案：

方案1：强制字符逐行换行（和原
效果完全一致） #

先把HTML恢复成正常的表头文本（不用加任何<br>）：

<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>

然后添加CSS，让每个字符自动换行：

th {
  /* 设置宽度为单个字符宽度，迫使内容逐行显示 */
  width: 1em;
  /* 允许在任意字符位置换行 */
  word-break: break-all;
  /* 可选：让内容居中对齐，视觉更美观 */
  text-align: center;
}

这个方案完全复刻你用<br>的效果，字符从上到下的顺序和原文本一致，修改课程代码时直接改表头文本即可，不用调整换行标签。

方案2：竖排文字模式（适合标准竖排场景） #

如果想要更规整的竖排效果，可以使用CSS的竖排属性：

th {
  /* 设置竖排方向，从左到右排列内容 */
  writing-mode: vertical-lr;
  /* 让字符保持正立，避免旋转 */
  text-orientation: upright;
  /* 可选：居中对齐内容 */
  text-align: center;
}

这种方式会让整个表头内容竖排显示，字符都是正立的，视觉上更统一，适合不需要严格逐字符换行的垂直表头需求。

内容的提问来源于stack exchange，提问作者slawalata