table单元格文字挤成一团是因为writing-mode: vertical-rl在display: table-cell上生效受限，必须显式设height、vertical-align: middle、line-height无单位值，并配text-orientation: mixed防英文堆叠。
table单元格里用writing-mode: vertical-rl为什么文字挤成一团？
因为writing-mode在<td>上生效，但默认td是display: table-cell，而该显示类型对writing-mode的支持受父table布局约束——尤其当没设height或vertical-align时，行高塌陷，文字被压缩到单行高度内。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>显式设置height（比如height: 120px），这是竖排能“展开”的前提 - 加
vertical-align: middle让文字在单元格内垂直居中，避免贴顶或贴底 - 禁用
line-height: normal或line-height: 1，改用无单位值如line-height: 1.4，否则竖排下字间距会失真 - 如果内容含英文/数字，必须配
text-orientation: mixed，否则ABC123会横着堆在一行里
table header怎么让文字竖排又保持可点击区域完整？
直接对<th>设writing-mode: vertical-rl后，点击热区常变窄——因为竖排后width变成“列宽”，而默认th的width由内容撑开，导致热区只剩一个字宽。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<th>加min-width: 2em（或具体像素值），确保点击区域足够 - 用
padding代替width控制左右留白，比如padding: 8px 12px - 避免对
th设white-space: nowrap，它会让竖排文本横向溢出，反而切掉热区 - 若需响应式，用
min-width: max-content配合width: fit-content，比固定像素更稳妥
IE11兼容table竖排要怎么降级？
@supports (writing-mode: vertical-rl)在IE11里不生效，且IE11只认-ms-writing-mode: tb-rl，还不支持text-orientation。硬套现代写法会导致整个单元格空白或错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports not (writing-mode: vertical-rl)包裹降级样式，专供IE识别 - 降级方案不用
transform旋转——它会让th宽度计算错乱、表头和数据列错位 - 改用
display: block+width: 1em+line-height: 1.8模拟单字一行，再用text-align: center居中 - 对IE11额外加
word-break: break-all，防止长英文单词撑破单元格
table里竖排文字换行异常，是white-space没调对
竖排表格里，<td>内容突然断在奇怪位置（比如“中华人民”断成“中华”“人民”两列），不是内容问题，而是white-space默认值normal在竖排下把中文标点（顿号、逗号）当成了换行点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
white-space: pre-line：保留手动换行符\n，合并多余空格，适合标题类短文本 - 长段落才用
white-space: normal，但得配合text-align: justify和letter-spacing: .05em改善断行节奏 - 绝对别用
white-space: nowrap——竖排下它会让整列文字横向溢出，表格结构直接崩 - 如果单元格里混有URL或代码片段，加
overflow-wrap: anywhere防溢出
writing-mode，真正起作用的是td或th的块上下文是否干净——float、inline-block、未设高度，任何一个都会让竖排失效。 
