如何用 CSS 实现垂直表头（每字母一行）-html教程-PHP中文网

如何用 CSS 实现垂直表头（每字母一行）

使用 writing-mode: vertical-lr 和 text-orientation: upright 可优雅实现表头文字垂直排列，无需手动插入，兼容现代浏览器且语义清晰、维护性强。

使用 `writing-mode: vertical-lr` 和 `text-orientation: upright` 可优雅实现表头文字垂直排列，无需手动插入 `
`，兼容现代浏览器且语义清晰、维护性强。

在 HTML 表格中，若需将表头（

）内容垂直显示——即每个字符独占一行（如 “MATH 101” 变为纵向排列的 M→A→T→H→空格→1→0→1），传统做法常依赖
拆分，但这破坏语义、增加冗余标记，且难以响应式调整。CSS 提供了更规范、可维护的解决方案。

核心方案是组合使用两个标准属性：

writing-mode: vertical-lr：将文本流方向设为垂直从左到右（即文字自上而下排列，行内顺序仍为从左到右）；
text-orientation: upright：强制所有字符正向直立显示（避免旋转90°，确保字母始终正面朝上，而非侧躺）。

✅ 完整示例代码如下：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<style>
  th {
    writing-mode: vertical-lr;
    text-orientation: upright;
    /* 可选：增强可读性 */
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
  }
  table {
    border-collapse: collapse;
  }
  td {
    padding: 8px;
    border: 1px solid #ddd;
  }
</style>

MATH 101	HIST 101	PHYS 101
A	A	A
B	B	B

? 注意事项：

浏览器兼容性：writing-mode 和 text-orientation 在 Chrome 48+、Firefox 41+、Safari 14.1+、Edge 79+ 中原生支持；旧版 Safari 需加 -webkit-writing-mode 前缀（但 text-orientation 不支持，此时建议降级为 vertical-rl + text-orientation: mixed）；
空格与数字处理：upright 模式下，空格和数字均保持直立对齐，视觉效果自然；
单元格高度适配：垂直文本会自动撑高，建议配合 min-height 或 line-height 微调间距；
无障碍友好：相比
拆分，纯文本内容保留完整语义，屏幕阅读器可正常朗读“MATH 101”，提升可访问性。

总结：抛弃
硬换行，拥抱 CSS 逻辑书写模式——这不仅是样式优化，更是语义化与可维护性的双重升级。