HTML表格如何设置列的对齐方式为两端对齐（技巧分享）-html教程-PHP中文网

表格单元格内容两端对齐必须用text-align: justify，但单纯使用无效，因中文无天然断点，需配合text-align-last: justify或::after伪元素补宽，并确保单元格为块级上下文。

html表格如何设置列的对齐方式为两端对齐（技巧分享）

表格单元格内容两端对齐必须用 `text-align: justify`

单纯写 text-align: justify 很可能无效——尤其在中文段落里。浏览器只对「有空格分隔的单词」才触发两端对齐，而中文默认无词间空格，所以整段汉字会被当成一个“单词”，无法拉伸。

必须在文本中插入空格（如：这是一段文本），或用手动分隔汉字（不推荐，维护成本高）
对英文/数字混合内容，text-align: justify 通常能直接生效
配合 text-align-last: justify 可让最后一行也尝试拉伸，但 IE 以外的现代浏览器支持度较好，Chrome/Firefox 需要至少两行才明显起效
单行文本几乎不可能两端对齐，除非容器宽度远大于内容宽度且启用 word-break: break-all 强制换行

`text-align-last` 在表格中容易被忽略的兼容性问题

很多开发者以为加了 text-align-last: justify 就万事大吉，实际它在 <td> 和 <code><th> 上的行为很受限：Firefox 默认忽略该属性，Safari 对 <code>text-align-last 的支持依赖于父元素是否设置了 text-align: justify，且仅对块级渲染有效。

确保目标单元格是块级上下文（display: table-cell 默认满足，无需额外设置）
避免在 <td> 上直接写内联样式，优先用 CSS 类统一控制，例如：<code>.justify-cell { text-align: justify; text-align-last: justify; }
IE10+ 支持 text-align-last，但需加前缀 -ms-text-align-last；Firefox 直到 90+ 版本才原生支持，旧版本需靠 ::after 伪元素模拟（见下条）

用 `::after` 伪元素补全最后一行对齐（兼容 Firefox/旧 Chrome）

当 text-align-last 不生效时，最稳妥的 fallback 是用伪元素撑开最后一行宽度，强制浏览器执行两端对齐逻辑。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

.justify-cell {
  text-align: justify;
}
.justify-cell::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  vertical-align: top;
}

这个技巧本质是让浏览器认为「内容后还有一行空白」，从而把真实文本当作倒数第二行来处理，触发 justify
必须搭配 vertical-align: top，否则可能引发基线错位导致垂直偏移
如果单元格内有图标或 <img>，需额外设置 vertical-align: middle 防止图文错位

表格列整体对齐 ≠ 单元格内容对齐

有人试图给 <col> 或 <colgroup></colgroup> 设置 text-align，这是无效的——<col> 只接受 width、span 和部分 border 属性，不能承载文本对齐语义。

列对齐必须落到每个 <td> 或 <code><th> 上，或通过 CSS 选择器批量控制，例如：<code>tr td:nth-child(3) { text-align: justify; }
若想某列所有单元格统一行为，建议用 class（如 class="col-justify"）而非结构选择器，避免因动态插入行导致样式断裂
注意：表格使用 border-collapse: collapse 时，text-align 仍完全有效，不影响对齐逻辑

text-align: justify

text-align-last