首列竖排需用writing-mode: vertical-lr + text-orientation: mixed并设固定宽高；标签列用text-align: justify + text-justify: inter-character且必须设lang="zh"和显式宽度；长文本两端对齐需多行+lang="zh"+text-justify；居中须作用于td, th而非table。
表格文字排版不是“加个 text-align 就完事”，真正要稳，得按场景拆解：首列竖排、标签列对齐、长文本两端对齐、多行居中——每个都有硬性前提和典型翻车点。
首列文字怎么竖排才不歪？
直接给 <th> 或 <td> 加 writing-mode: vertical-rl 会出问题：文字从右往左堆、换行错乱、表头对不齐，Chrome 和 Firefox 渲染还不一致。
- 必须用
writing-mode: vertical-lr+text-orientation: mixed组合，保证文字正向可读 - 必须设固定
width（如width: 32px）和min-height（如min-height: 80px），否则浏览器算不出竖排所需空间 - 只作用于首列，比如
th:first-child, td:first-child，避免影响整表流式布局 - 响应式下必须加
table-layout: fixed，并用<col>显式定义首列宽，否则列宽会塌或爆 - IE11 不支持
vertical-lr，得 fallback 到transform: rotate(90deg)+transform-origin: center+ 尺寸互换（原宽变高、原高变宽）
标签列文字长短不一，怎么整齐对齐？
敲空格、居中、两端对齐都不合适——空格随字体失效，居中破坏视觉动线，两端对齐在单行时等于没对齐。
- 用分散对齐（
text-align: justify+text-justify: inter-character），但仅限固定宽度、内容短的标签列（如“姓名”“电话”“地址”） - 必须设
lang="zh"在<table>上，否则 Safari 17.4+ 静默忽略 - 必须设显式
width（不能靠内容撑），且单元格内不能有white-space: nowrap或overflow: hidden，否则无法触发换行拉伸 - 别用
td:nth-child(n)做列对齐——遇到colspan就错位；改用<colgroup><col style="text-align: justify"></colgroup>
数据单元格里中文怎么两端对齐？
text-justify 是无效属性，浏览器直接忽略；光写 text-align: justify 也没用，中文默认不拉伸字间距。
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明
text-align: justify和text-justify: inter-character - 必须配合
lang="zh"（设在<table>或<td>上） - 单元格需足够宽、内容足够长（至少两行以上），否则最后一行不拉伸，看起来还是左对齐
- 旧版 Safari / Edge 不支持
text-justify，要用@supports (text-justify: inter-character)包裹，降级为text-align: left - 避免在
<td>里混用word-break: break-all或图标<img>，它们会打断行内流，导致 justify 失效
怎么让所有单元格文字都水平垂直居中？
对 <table> 加 text-align: center 没效果——表格文本不在 table 的行内流里，而是在 <td> 和 <th> 内部。
- 必须作用于
td, th：写成table td, table th { text-align: center; vertical-align: middle; } -
vertical-align: middle看起来没居中？大概率是height设太小，或没加padding缓冲；优先调padding（如padding: 8px 12px），比硬卡height更可靠 - 不要用
display: flex改写<td>——破坏表格语义，屏幕阅读器可能无法识别行列关系 - 如果用了
border-collapse: collapse，不影响居中逻辑，但能减少双线干扰视觉判断 - 表头
<th>默认已text-align: center，但垂直方向仍需显式加vertical-align: middle
最常被忽略的是上下文约束：竖排要固定尺寸、分散对齐要 lang 和宽度、justify 要多行、居中要避开 height 硬限制——这些不是可选项，是生效的前提条件。
