真正能落地的方案是writing-mode + text-orientation组合；text-orientation仅在writing-mode设为vertical-rl或vertical-lr时生效，单独使用被浏览器忽略；中英混排必须用mixed而非upright，且需配合white-space: nowrap、line-height和padding等细节调整。
别用 transform: rotate() 做垂直表头——它不参与盒模型计算，文字悬出、高度塌陷、sticky 失效全是必然结果。真正能落地的方案是 writing-mode + text-orientation 组合。
为什么 text-orientation 单独写没反应
text-orientation 不是独立属性，它只在 writing-mode 进入垂直模式后才生效。单独写 text-orientation: mixed，浏览器会静默忽略（DevTools 里显示为灰色删除线），页面毫无变化。
必须搭配以下之一：
-
writing-mode: vertical-rl（推荐，中文竖排默认方向） -
writing-mode: vertical-lr（如蒙古文等左起竖排）
写了 writing-mode: horizontal-tb 再加 text-orientation，完全无效。
立即学习“前端免费学习笔记（深入）”；
text-orientation: mixed 和 upright 怎么选
中英混排场景下，mixed 是唯一合理选择。它让汉字直立、ASCII 字母和数字顺时针转 90°，标点自动适配方向，符合阅读习惯。
误用 upright 的典型后果：
-
"HTML"拆成四行：H
T
M
L，语义断裂 - 数字
2026堆叠显示，失去数值连贯性 - 句号
.跑到行首，斜杠/和连字符-方向错乱
除非是纯中文印章式标题，否则一律避开 upright。
vertical-rl + mixed 下必须调的三个细节
竖排不是加两行 CSS 就完事。这三个参数不调，文字会挤、偏、断行：
-
white-space: nowrap：防止长词换行破坏垂直对齐 -
line-height: 1.4（起始值）：英文字符旋转后视觉高度略大于汉字，line-height: 1.2容易过挤 -
padding: 12px 8px：上边距控顶部留空，右边距控右侧呼吸感；避免设height或line-height固定值，交给writing-mode自动算高度
固定表头（position: sticky）下怎么不出问题
如果 thead tr 用了 position: sticky; top: 0，再给 th 加 transform，99% 会丢掉粘性或滚动闪烁。
writing-mode 方案天然兼容：
- 不触发新层叠上下文
- 不改变元素占位尺寸
-
text-align和vertical-align全部生效
若必须兼容老旧系统硬要用 rotate()，得额外加 z-index: 10 和 backface-visibility: hidden 强制图层提升——但这是补救，不是正解。
真正麻烦的从来不是怎么把字转过来，而是转完之后要不要它参与盒模型计算：transform 说“我不算”，writing-mode 说“我算”。选错，整个表格的渲染逻辑就崩了。
