writing-mode对table、tr无效，仅对块级或行内级元素生效；td/th需设display:inline-block或block才可配合vertical-rl实现竖排，且vertical-lr兼容性差，生产环境应避免使用。

writing-mode 对表格单元格无效？先确认作用对象

直接给 <table> 或 <code><tr> 设置 <code>writing-mode: vertical-rl 不会生效 —— 这是常见误解。CSS 的 writing-mode 只对**块级或行内级元素**（且需具备文本流特性）起作用，而 <td>、<code><th> 默认是 <code>display: table-cell，该 display 值会忽略 writing-mode。

正确做法是强制改变单元格的 display 类型：

• 给 <td> 和 <code><th> 设置 <code>display: inline-block 或 display: block
• 再配合 writing-mode: vertical-rl（从右向左垂直书写）或 vertical-lr（从左向右，需注意浏览器支持度）
• 为避免换行和对齐错乱，建议同时加 text-align: center 和 vertical-align: middle

纵向表头怎么让文字顺时针旋转90°？用 transform 更可靠

如果目标是传统“竖排表头”（文字沿列方向自上而下、顺时针转90°），writing-mode: vertical-rl 会让文字**逆时针旋转**（即字头朝左），不符合中文阅读习惯。此时应放弃 writing-mode，改用 transform: rotate(90deg)。

实操要点：

• 必须设置 display: inline-block（否则 transform 在 table-cell 上不生效）
• 加 width 和 height 控制旋转后占用空间，否则单元格会塌缩
• 用 transform-origin: center 避免偏移；必要时补 white-space: nowrap 防止换行
• 示例：

  <th style="display:inline-block; width:20px; height:120px; transform:rotate(90deg); transform-origin:center;">姓名</th>

Chrome/Firefox/Safari 渲染差异：vertical-lr 几乎不可用

writing-mode: vertical-lr 理论上实现“字头朝上、自左向右”的竖排，但实际兼容性极差：vertical-lr 在 Chrome 和 Safari 中被完全忽略（仍按 vertical-rl 渲染），Firefox 虽支持却存在 line-height 计算异常。


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载

因此生产环境应：

• 统一使用 writing-mode: vertical-rl + text-orientation: mixed（让数字/拉丁字母自动正立）
• 或彻底放弃 writing-mode，用 transform: rotate() + 手动调整尺寸
• 避免依赖 text-orientation: upright —— 它在多数浏览器中对中文无效

响应式纵向表格容易崩？关键在宽高硬编码

用 transform 或 writing-mode 实现纵向文字后，表格结构本身仍是横向布局，导致 <th> 宽度不再由内容决定，而是由你写的 <code>width / height 决定。一旦屏幕变小，固定尺寸会撑破容器。

缓解方式：

• 用 vw 或 max-width 替代固定像素值，例如 width: 4vw
• 给 <table> 加 <code>table-layout: fixed，并为每列设 width 百分比
• 移动端直接隐藏纵向表头，改用 caption 或折叠面板 —— 纵向表格在小屏上本就难读

真正麻烦的不是怎么转文字，而是转完之后如何让整张表还像一张表 —— 表格语义、可访问性、打印样式都会受牵连，这些常被忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！