writing-mode: vertical-rl 是更靠谱的替代方案，它让文字真正垂直流渲染，自动适配单元格高度，兼容 bootstrap 4 响应式与 sticky 表头，需搭配 text-orientation: mixed 和 white-space: nowrap 使用。
transform: rotate() 不能直接让 th 文字“真正垂直居中”，尤其在 Bootstrap 4 表格里，容易撑破单元格、错位、响应式失效——这不是你 CSS 写错了，是它天生就不适合干这事。
为什么 transform: rotate(-90deg) 在 th 里总出问题
它只是视觉旋转，不改变盒模型尺寸计算：th 还按原始宽高占位，文字却飞出去了；padding 和 text-align 失效；vertical-align: bottom 完全没反应；Bootstrap 的 .table 行高自动计算也崩了。
- 常见错误现象：文字悬出单元格右边缘、表头高度塌陷、移动端列宽错乱
- 使用场景：报表/统计表格需要竖排“月份”“类别”等短标签
- 性能影响：每格都触发重绘，滚动时卡顿明显（尤其 IE/旧 Edge）
- 兼容性：Chrome/Firefox 没问题，但 Safari 对
transform-origin在th里的行为不稳定
writing-mode: vertical-rl 是更靠谱的替代方案
它让浏览器“真把文字当垂直流渲染”，单元格高度自动适配文字行数，text-align 和 padding 全部生效，且原生支持 Bootstrap 4 的响应式类。
- 必须搭配
text-orientation: mixed，否则英文字母会侧躺（变成“ＨＥＬＬＯ”而非“HELLO”） -
white-space: nowrap防止长词换行破坏垂直对齐 - 用
padding: 16px 6px而不是上下对称值——上边距控制顶部留空，右边距控制右侧呼吸感 - 避免设
height或line-height，交给 writing-mode 自动算
如何让倾斜文字在固定表头（position: sticky）下不抽风
如果用了 thead tr { position: sticky; top: 0; }，再套 transform 会导致粘性失效或闪烁。而 writing-mode 不触发层叠上下文变更，完全兼容。
- 别给
th加transform同时又加sticky——99% 情况下会丢掉粘性 - 若必须用
rotate（比如 legacy 系统），得额外加z-index: 10和backface-visibility: hidden强制图层提升 -
writing-mode方案下，th的min-width建议设为40px起，防止过窄导致文字挤压
transform 说“我不算”，writing-mode 说“我算”。选错就等于选错整个表格的渲染逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
