如何使用 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 与 text-orientation。

✅ 推荐方案：CSS 垂直排版

只需为

元素添加以下样式：

th {
  writing-mode: vertical-lr;   /* 文字从上到下，从左到右书写（适合拉丁字母） */
  text-orientation: upright;  /* 保持字母正立（不旋转90°），逐字垂直堆叠 */
}

配合简洁的 HTML 结构：

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

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

下载

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+）中完全支持；IE 已废弃，无需兼容。
vertical-lr vs vertical-rl：
- vertical-lr：适合从左向右书写的语言（如英文），文字自上而下、列自左向右排列；
- vertical-rl：适用于传统中文/日文排版（自上而下、自右向左），此处不推荐。
空格处理：text-orientation: upright 会将空格渲染为可见空白行，符合预期；若需压缩空格，可用 white-space: pre 或预处理字符串。

响应式增强：可结合媒体查询，在小屏时回退为水平排版：

@media (max-width: 600px) {
  th { writing-mode: horizontal-tb; text-orientation: mixed; }
}

? 进阶提示

如需对齐优化（如居中或顶部对齐），可补充：

th {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;     /* 水平居中（相对于单元格） */
  vertical-align: middle; /* 垂直居中（行内对齐） */
  padding: 8px;
}

该方案不仅提升了代码质量，也便于后续国际化（如支持多语言垂直标题）和自动化生成（如 JS 动态渲染课程名）。告别
堆砌，用标准 CSS 实现专业级表格排版。