HTML表格中实现垂直文本排列，必须用writing-mode: vertical-rl配合text-orientation: mixed，并将td/th显式设为display: block或inline-flex；直接在table-cell上使用writing-mode会被忽略，transform或flex拆字会破坏表格结构与可访问性。
HTML表格里实现垂直文本排列，writing-mode: vertical-rl 是唯一语义正确、可复制、支持屏幕阅读器的方案；用 transform: rotate(90deg) 或拆单元格加 flex-direction: column 都会破坏表格结构、选中逻辑和响应式行为。
table-cell 上直接写 writing-mode: vertical-rl 为什么经常失效？
表格单元格（<td>、<th>）默认是 display: table-cell，而 writing-mode 在 table-cell 上被浏览器忽略——这不是 bug，是规范行为。
- 必须显式改写为
display: block或display: inline-flex才能激活writing-mode - 若保留
table-cell，哪怕加了!important也无效 - 不要试图在
<tr>或<table>上设writing-mode：它会反转整行/整表的布局流向，导致列顺序错乱、text-align失效
vertical-rl + text-orientation: mixed 在表格里怎么配才不出错？
只写 writing-mode: vertical-rl 不够，表格单元格里混有中英文时，数字和字母会横躺或倒置，汉字也可能歪斜。
-
text-orientation: mixed必须显式声明——不是默认继承，尤其在display: block后容易丢失 - 避免对整个
<th>设text-orientation: upright：会让 “2024” 变成四行小字，“API” 变成不可读的竖列字母 - 如果单元格含纯英文缩写（如 “HTTP Status”），建议用
<span style="writing-mode: horizontal-tb">HTTP</span>局部回横排
表格竖排后换行、对齐、间距全乱了？关键调哪几个 CSS？
竖排改变了书写流方向，line-height、padding、text-align 的作用对象都变了，不能照搬横排习惯。
立即学习“前端免费学习笔记（深入）”；
-
line-height控制的是“列间距”，必须用无单位值（如line-height: 1.4），别用px—— 否则字号一变就重叠或撑开 -
padding的左右方向变成“上下方向”：原padding: 0 8px实际变成「顶部/底部留白」，应改用逻辑属性padding-block: 4px（书写流前后）和padding-inline: 8px（书写流左右） -
text-align: center在vertical-rl下是“左右居中”，即让文字在列宽内水平居中；要“上下居中”，得靠vertical-align: middle（仅对table-cell有效）或 flex 布局 - 禁用
white-space: nowrap：它会让中文单元格内容不折列，直接横向溢出表格边界
移动端表格竖排要注意什么兼容细节？
iOS Safari 对表格内 writing-mode 的支持比桌面版更脆弱，尤其在 zoom 或动态 resize 场景下容易首帧错位或标点翻转异常。
- 避免在
<button> <td>这类嵌套交互元素里直接设writing-mode，优先用 wrapper<div>包裹再设样式 - 不要依赖
text-combine-upright压缩年份或编号：iOS 16.4 之前基本不渲染，且只对连续 2–4 个 ASCII 字符生效 - 字体必须支持竖排特性：思源黑体、Noto Sans CJK 稳定；Windows 的微软雅黑在 Safari 移动端可能漏掉部分竖排标点
- 真正在意可访问性的话，别把整张表设竖排——屏幕阅读器仍按 HTML 顺序线性读取，视觉竖排 ≠ 语义竖排
真正难的不是给 <td> 加两行 CSS，而是意识到表格一旦竖排，colspan 和 rowspan 的语义会和视觉完全脱钩，border-collapse 行为也会变化；如果只是想让表头文字竖着放，优先考虑用 <th> 单独设样式，而不是整表切换书写流。
