writing-mode在table表头中易失效，因th/td默认display:table-cell会忽略该属性；需改display:block并显式设置宽高、text-align:center和vertical-align:middle才能生效，且vertical-rl为中文侧边表头首选。
为什么 writing-mode 在 table 表头里容易失效
直接给 <th> 加 <code>writing-mode: vertical-rl 通常没效果，因为表格单元格默认有 table-cell 的 display 行为，会忽略部分 writing-mode 的布局约束。浏览器对 <table> 内部元素的 writing-mode 支持有限，尤其在 Chrome 和 Safari 中，<code>th 或 td 上设置后文字可能不转、尺寸错乱，甚至被截断。
真正起作用的是把表头单元格「脱离表格流」——常见做法是用 display: block 覆盖默认行为，再配合 writing-mode 和尺寸控制：
-
display: block是必须的，否则 writing-mode 不生效 - 需显式设置
width和height，否则垂直文字会撑开单元格导致错位 - 加
text-align: center和vertical-align: middle对齐文字更稳妥 - Firefox 对 table 内 writing-mode 支持稍好，但跨浏览器一致性仍依赖 block 方案
侧边表头的 HTML 结构怎么写才不踩坑
别用 <thead><tr>
<th>A</th>
<th>B</th>
</tr></thead> 这种常规横向结构。侧边表头本质是「把列标题变成行方向的标签」，应把表头放在第一列，每行一个字段名：
| 姓名 | 张三 | 李四 |
|---|---|---|
| 年龄 | 25 | 31 |
关键点：
- 表头必须是
<th>，且位于每行最左侧（即第一列），不能塞进 <code><thead> 里试图“旋转整行”<li>不要给 <code><table> 设 <code>border-collapse: collapse后又忽略border-spacing，它会影响th的实际宽高计算 - 如果需要固定第一列（表头列），需额外用
position: sticky，但 sticky 在display: block下会失效，得回退到table-cell+ transform 组合 -
vertical-rl下，text-orientation: mixed（默认值）能让数字和拉丁字母自动正立，避免全部 sideways - 若想强制所有字符都顺时针转 90°，可加
text-orientation: upright，但中文会变难读 - IE 完全不支持 writing-mode 用于 table 单元格，如需兼容 IE，只能用
transform: rotate(90deg)+ 手动调transform-origin
writing-mode: vertical-rl 和 vertical-lr 怎么选
绝大多数场景用 vertical-rl：文字从上到下、从右向左排列，符合中文传统竖排习惯，且兼容性更好（Chrome 47+、Firefox 41+、Safari 12.1+）。
vertical-lr 会让文字从上到下、从左向右排，在部分 RTL 语言或特殊排版中才有意义，中文侧边表头基本不用它。实测中：
字体大小和行高怎么调才不溢出
垂直文字的实际占用高度 ≠ 字号大小。比如 font-size: 14px 的文字，在 vertical-rl 下会以「字宽」方向延伸，此时 height 需按原字号的 1.2–1.5 倍设，否则会被截断：
.sideways {
writing-mode: vertical-rl;
display: block;
width: 2em; /* 关键：宽度要窄，对应旋转后的“高度” */
height: 18px; /* 略大于 font-size，留出 baseline 余量 */
font-size: 14px;
line-height: 1; /* 避免行高叠加造成额外撑开 */
text-align: center;
}
容易忽略的细节：
-
width实际控制旋转后文字的「显示高度」，值太小会换行或省略，建议用em或ch单位适配字体 -
line-height: 1很重要，否则多行文本（如“用户基本信息”）在垂直模式下会因行高叠加严重超限 - Mac 上某些字体（如 PingFang SC）在 vertical-rl 下 baseline 偏移明显，可加
padding-top: 2px微调视觉居中
复杂点在于：writing-mode 的行为会随字体、语言、系统渲染引擎变化，同一段 CSS 在 macOS Safari 和 Windows Chrome 中可能呈现不同 baseline 对齐。真要稳定，得靠视觉调试 + 少量像素级偏移补正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
