writing-mode: vertical-rl 是表头竖排最可靠方案，原生支持、语义清晰、不破坏结构；需配合 text-align、vertical-align、white-space 等属性优化对齐与换行，ie11 用 filter 降级，注意高度控制与移动端适配。
用 writing-mode 实现表头竖排最可靠
现代浏览器中，writing-mode: vertical-rl 是让表头文字竖排的首选方案，它原生支持、语义清晰、不破坏表格结构。不要用 transform: rotate() 强转，那会让文字不可读、焦点错位、打印异常。
实操建议：
- 只对
<th> 元素设置，避免影响 <code><td> 内容<li>搭配 <code>text-align: center和vertical-align: middle对齐更稳 - 加
white-space: nowrap防止长文字自动换行折成多行 - Chrome/Firefox/Edge 100% 支持；Safari 从 14.1 起支持，旧版 Safari 可加
-webkit-writing-mode前缀（但实际极少需要）
IE11 下必须降级用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
IE11 不识别 writing-mode 的 vertical 值，且 transform: rotate(90deg) 在表格单元格里会触发 layout bug —— 宽度塌陷、边框错位、内容截断。
唯一能稳定工作的方案是 IE 专属 filter：
th {
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
/* IE11 fallback */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
注意：rotation=3 表示 270°（即顺时针转 90°），等效于竖排；rotation=1 是 90°（倒着竖排），别填错。
竖排后单元格高度撑不开？加 min-height 或固定 height
竖排文字本身不触发行高继承，尤其在 Firefox 中，<th> 高度常被压缩到仅容下基线，导致文字被裁或上下留白过大。<p>解决方法不是调 <code>line-height（无效），而是显式控制尺寸：
- 给
<th> 设 <code>min-height: 80px（按字体大小和字数估算） - 若列宽固定，可配合
height: 100%+ 父<thead> 设 <code>display: table-header-group - 避免设
overflow: hidden，否则竖排文字顶部/底部易被切掉 - 加
-webkit-text-size-adjust: 100%防止 iOS 自动放大文字 - 给
<th> 加 <code>cursor: default，避免长按唤出复制菜单（用户本意只是看表头） - 如果表格可横向滚动，确保
<th> 不因竖排变窄而挤占滚动空间 —— 建议用 <code>flex或grid替代纯 table 布局做响应式处理竖排看着简单，但跨浏览器对齐、高度计算、触摸行为这三块最容易漏掉调试。特别是 Firefox 下
vertical-rl的 baseline 对齐逻辑和 Chrome 不一致，上线前务必在真机上滑动+缩放+长按测一遍。
移动端竖排表头要防误触和缩放失效
竖排文字在 iOS Safari 中默认禁用双击缩放，且 touch-action: manipulation 可能干扰点击区域判断。
关键补丁：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
