writing-mode: vertical-rl 在 table-cell 上无效，需先设 display: block；text-orientation: upright 更适合表格混排；line-height 控制纵向字距，padding 左右作用于列外侧。
表格单元格里写 writing-mode: vertical-rl 为什么没反应？
因为 <td> 和 <code><th> 默认是 <code>display: table-cell，而 writing-mode 在 table-cell 上被浏览器忽略——不是你写错了，是它本来就不支持。必须先把单元格“转成块级上下文”才能生效。
- 给
<td> 或 <code><th> 显式加 <code>display: block（最稳妥）或display: inline-block - 别在
<tr> 或 <code><table> 上设 <code>writing-mode，它不作用于表格结构本身 - 如果用了
float、position: absolute或display: table-row等旧式布局，writing-mode也会被绕过 -
text-orientation: mixed：汉字直立，英文字母和数字自动顺时针旋转 90° → 表格中易出现 “v2.1” 变成歪斜小字，“()” 显示为 “)(”，Firefox 和 Chrome 渲染不一致 -
text-orientation: upright：所有字符强制直立 → “API” 保持可读横排形态，“2024” 不拆成四行，“()” 位置正常，适合表格数据场景 - 别用
sideways，它会让整个单元格内容侧躺，完全不可读 -
line-height: 1.4是安全起点；line-height: 1容易让小字号文字粘连，尤其在font-size: 12px时明显 -
padding: 0.5em 1em表示：顶部/底部各留 0.5em（即首字顶、末字底），左右各留 1em（即整列文字左右两侧） - 容器若设了
height，竖排内容溢出会被裁剪；改用min-height或去掉固定高度，让行数自然撑开 - 把
<table> 放进 <code>display: flex容器：Safari 会错判主轴方向，导致竖排单元格宽度异常压缩；建议改用display: grid或直接移除父级 flex - 不要依赖
text-combine-upright—— 它在 iOS Safari 上直到 16.4 才部分支持，且只对 2–4 个连续 ASCII 字符有效，表格里基本无效
真正难的不是给
vertical-rl 配 text-orientation: mixed 还是 upright？
表格里混排中文、数字、英文缩写（如 “API v2.1”、“HTTP”、“2024”）时，mixed 常导致括号反向、数字堆叠、光标跳位；upright 才是更可控的选择。
表格竖排后，line-height 和 padding 方向怎么算？
竖排下盒模型方向翻转：line-height 控制的是字与字之间的**纵向间距**（即上下距离），padding 的左右值实际作用在文字列的**外侧**（即视觉上的“左右边距”），上下值反而变成首尾留白。
移动端 Safari 和 Firefox 对表格竖排的支持差异
Safari 17+ 和 Firefox 120+ 已基本稳定，但仍有两个隐藏坑点：嵌套表格和 flex 包裹的 <table> 容器。
<ul><li>嵌套表格（<code><table> 里再套 <code><table>）：内层单元格的 <code>writing-mode 可能被外层 table-layout 逻辑压制，需逐层加 display: block
<td> 加两行 CSS，而是意识到表格本身是一套独立布局系统，<code>writing-mode 必须在它允许的上下文里“插队”生效——稍一松懈，就会卡在 display 类型、父级定位、或浏览器渲染优先级上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
