HTML表格中首列文字竖排的排版实现-html教程-PHP中文网

真正稳定实现首列竖排需用 writing-mode: vertical-lr + text-orientation: mixed + 固定宽高 + white-space: nowrap；ie11 用 transform: rotate(90deg) + 尺寸互换 + filter fallback；响应式下须设 table-layout: fixed 并用定宽。

html表格中首列文字竖排的排版实现

用 `writing-mode` 实现首列文字竖排，但别直接套 `vertical-rl`

直接对 <td> 或 <code><th> 设置 <code>writing-mode: vertical-rl 看似最简，但实际会出问题：文字从右往左堆叠、换行方向反常、和表头对不齐，尤其在 Chrome/Firefox 渲染差异明显。真正稳定的做法是配合 text-orientation: mixed 和显式尺寸控制。

实操建议：

只对首列单元格（如 th:first-child 或 td:first-child）设置样式，避免影响整表布局
必须设定固定 width（如 width: 32px）和 height（或 min-height），否则浏览器无法正确计算竖排空间
优先用 writing-mode: vertical-lr + text-orientation: mixed，保证文字正向可读、不镜像翻转
加 white-space: nowrap 防止单字被意外折行

IE11 兼容方案：用 `filter: flipH` + `transform` 组合

IE11 不支持 writing-mode 的 vertical-lr 值，但能识别 ms-writing-mode: tb-rl（仅限旧版语法）。不过该值会让文字倒置，需额外翻转。更可靠的方式是用 CSS 变换模拟竖排。

实操建议：

对首列单元格设 transform: rotate(90deg)，再用 transform-origin: center 对齐中心
配合 width 和 height 互换（比如原宽 32px → 设 height: 32px），否则旋转后溢出
IE 中需加 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) 作为 fallback（仅 IE6–9，IE11 已不推荐）
注意：rotate(90deg) 后单元格盒模型仍按水平流计算，可能挤压相邻列，需用 position: relative + z-index 微调层叠

响应式表格里竖排首列会崩？先禁掉 `table-layout: auto`

当表格放在响应式容器中（如 max-width: 100%），默认 table-layout: auto 会让浏览器动态重算列宽，而竖排文字的宽度计算极不稳定——尤其含中文时，浏览器可能把“一”字当 1em 宽，却忽略竖排实际占用高度，导致列宽归零或撑爆。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

实操建议：

给 <table> 显式设 <code>table-layout: fixed，让列宽由第一行 <col> 或首行 <th> 的 <code>width 决定
用 <col> 标签定义首列宽度（如 <col style="width: 40px">），比写 CSS 更可靠
竖排单元格内文字若过长（如“供应商名称”），用 overflow: hidden + text-overflow: ellipsis，但注意 ellipsis 在竖排下无效，得靠 JS 截断或服务端预处理