不能，writing-mode: vertical-rl 直接作用于 或 通常无效，因其 display: table-cell 会忽略该属性；需包裹一层 并在其上设置 writing-mode: vertical-rl 和 text-orientation: mixed 才能正确实现中文竖排表头。
writing-mode竖排表头在table-cell上直接生效吗
不能。直接给 <th> 或 <code><td> 设置 <code>writing-mode: vertical-rl 通常无效，因为表格单元格默认有 display: table-cell，而该 display 值会忽略 writing-mode 对文本流方向的控制。
真正起作用的是把文字容器「脱离表格单元格的 display 约束」——最稳妥的方式是加一层内联元素（比如 <div> 或 <code><span></span>），再对它应用 writing-mode。
- 错误写法：
<th style="writing-mode: vertical-rl">姓名</th>（多数浏览器不渲染竖排） - 正确写法：
<th><div style="writing-mode: vertical-rl; text-orientation: mixed">姓名</div></th> -
text-orientation: mixed是关键补丁，否则中文可能被旋转90°变成横向小字，而非“字面朝上、从上到下”排列
vertical-rl 和 sideways-lr 有什么区别
这两个值都让文字竖排，但基线和阅读方向不同，直接影响表头对齐和可读性：
-
writing-mode: vertical-rl：文字从右向左竖排（即列从右往左增长），汉字顶部朝右，符合传统中文竖排习惯；text-orientation: mixed可让汉字保持正立 -
writing-mode: sideways-lr：整行文字顺时针转90°，所有字符（包括汉字）都被旋转，阅读时需歪头；text-orientation对它无效 - 移动端 Safari 对
sideways-lr支持差，iOS 16 之前基本不渲染；vertical-rl兼容性更好（Chrome/Firefox/Safari/Edge 均支持）
竖排表头宽度和高度怎么控制才不挤压内容
竖排后单元格的宽高行为会反直觉：原本的 width 变成“竖排方向的高度”，height 反而影响“水平方向的宽度”。更可靠的做法是约束内层容器：
- 给包裹用的
<div> 设定固定 <code>width（比如width: 2em），它会成为竖排文字的“行宽”，即每字占的横向空间 - 用
height: fit-content或不设height，让 div 高度随文字行数自然撑开 - 避免给
<th> 设 <code>width或height，否则容易触发表格自动重算，导致列宽异常收缩 - 如果需要统一列宽，应在
<col>或<colgroup></colgroup>上用width，而不是单元格样式 - 检测支持：可用
@supports (writing-mode: vertical-rl)包裹样式，否则 fallback 到transform: rotate(90deg) - 注意：
transform会改变盒模型位置，需配合transform-origin和负 margin 调整定位，例如：transform: rotate(90deg); transform-origin: left top; margin-left: -20px; - 如果项目必须兼容 IE，建议放弃纯 CSS 竖排，改用 SVG
<text></text>或服务端生成图片表头——CSS 方案本质不可靠
IE 或旧版 Edge 下竖排失效怎么办
IE 完全不支持 writing-mode 的现代取值（vertical-rl 等），旧版 Edge（≤17）也仅部分支持。没有优雅降级方案，只能回退为横排或使用 transform：
竖排表头看着简单，实际卡点都在 display 模式、text-orientation 组合、以及旧浏览器的断层支持上；别指望一行样式搞定，得把文字包一层、调一次 orientation、再压一遍尺寸逻辑。
