writing-mode在table表头中易失效，因th/td默认display:table-cell会忽略该属性；需改display:block并显式设置宽高、text-align:center和vertical-align:middle才能生效，且vertical-rl为中文侧边表头首选。
为什么 writing-mode 在 table 表头里容易失效
直接给 <th> 加 writing-mode: vertical-rl 通常没效果，因为表格单元格默认有 table-cell 的 display 行为，会忽略部分 writing-mode 的布局约束。浏览器对 <table> 内部元素的 writing-mode 支持有限，尤其在 Chrome 和 Safari 中，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> 这种常规横向结构。侧边表头本质是「把列标题变成行方向的标签」，应把表头放在第一列，每行一个字段名：
<table>
<tbody>
<tr>
<th class="sideways">姓名</th>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<th class="sideways">年龄</th>
<td>25</td>
<td>31</td>
</tr>
</tbody>
</table>关键点：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 表头必须是
<th>，且位于每行最左侧（即第一列），不能塞进<thead>里试图“旋转整行” - 不要给
<table>设border-collapse: collapse后又忽略border-spacing，它会影响th的实际宽高计算 - 如果需要固定第一列（表头列），需额外用
position: sticky，但 sticky 在display: block下会失效，得回退到table-cell+ transform 组合
writing-mode: vertical-rl 和 vertical-lr 怎么选
绝大多数场景用 vertical-rl：文字从上到下、从右向左排列，符合中文传统竖排习惯，且兼容性更好（Chrome 47+、Firefox 41+、Safari 12.1+）。
vertical-lr 会让文字从上到下、从左向右排，在部分 RTL 语言或特殊排版中才有意义，中文侧边表头基本不用它。实测中：
-
vertical-rl下，text-orientation: mixed（默认值）能让数字和拉丁字母自动正立，避免全部 sideways - 若想强制所有字符都顺时针转 90°，可加
text-orientation: upright，但中文会变难读 - IE 完全不支持 writing-mode 用于 table 单元格，如需兼容 IE，只能用
transform: rotate(90deg)+ 手动调transform-origin
字体大小和行高怎么调才不溢出
垂直文字的实际占用高度 ≠ 字号大小。比如 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 对齐。真要稳定，得靠视觉调试 + 少量像素级偏移补正。
