PDF导出表格样式错乱的核心原因是渲染引擎对CSS支持不全：border-collapse常失效，vertical-align行为不一，thead跨页不重复，字体缺失加剧错位；需针对性适配工具特性。
表格导出成 PDF 后样式错乱，不是 CSS 写得不对，而是渲染引擎根本没按你写的规则走 —— 尤其是 border-collapse、vertical-align、table-layout 这几个属性，在不同工具里表现差异极大。
为什么 border-collapse: collapse 在 PDF 里经常失效？
很多 PDF 渲染器（比如 wkhtmltopdf、Flying Saucer）对 border-collapse 的支持是“半残”状态：它可能解析了声明，但不真正合并边框，导致单元格之间出现双线或空白缝隙。更糟的是，某些引擎会把 border-spacing 当作固定值硬编码，无视 CSS 设置。
- 实操建议：显式给
table加style="border-collapse: collapse !important; border-spacing: 0;"，不要依赖外部 CSS 文件或 class - 避免用
border-style: hidden控制隐藏边框 —— 多数引擎不识别，改用border: none或border-width: 0 - 如果用 puppeteer 或 weasyprint，可加
table { border-collapse: collapse; }到@media print块里，它们比 wkhtmltopdf 更认这个规则
vertical-align 和单元格内容错位怎么 fix？
常见现象是文字贴顶、图片下沉、多行文本上下不对齐。根源在于 PDF 渲染器对 vertical-align 的实现不统一：有的只支持 top/middle/bottom，有的完全忽略 baseline，还有的把 text-top 当作无效值 fallback 成 top。
- 强制统一行为：给所有
td、th加style="vertical-align: middle !important; padding: 8px 4px;" - 避免混用
line-height和height—— 某些引擎会优先按height截断内容，而不是居中 - 如果单元格内含图标或小图，用
display: inline-flex; align-items: center;替代纯vertical-align，weasyprint 和 puppeteer 支持更好
跨页表格被截断，thead 不重复怎么办？
这是最让人头疼的场景：一页末尾的 tr 被砍掉一半，第二页开头没有表头。原生 HTML 表格不带分页语义，PDF 工具只能靠 heuristics 切割，而 thead 默认不会自动重复。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- wkhtmltopdf：必须加
--header-html或--footer-html手动注入表头 HTML 片段，且需配合@page { margin-top: 50px; }留白 - puppeteer：用
page.pdf({ preferCSSPageSize: true })+ 在 CSS 中写@media print { thead { display: table-header-group; } }—— 注意仅 Chromium ≥115 支持该行为 - html2canvas + jsPDF：必须手动收集
thead高度，在每页顶部重绘，不能依赖 CSS 自动行为
字体和中文显示为方块，跟表格有关吗？
有。表格本身不触发字体问题，但它放大了问题：一旦 font-family fallback 到默认等宽字体，table-layout: fixed 下的列宽计算就会崩 —— 因为字符宽度变了，引擎重新分配空间，结果就是列挤压、文字换行、边框错位。
- 检查服务器是否装了 CSS 中声明的字体（如
"Microsoft YaHei"、"Noto Sans SC"），不是看本地开发机，是看部署 PDF 服务的 Linux 机器 - Linux 下确认字体路径：
/usr/share/fonts/或~/.fonts/，运行fc-list | grep -i "yahei"验证 - 若无法装系统字体，改用 base64 内联
@font-face，但注意 wkhtmltopdf 不支持 data URI，只有 puppeteer/weasyprint 可用
表格导出 PDF 的核心矛盾，从来不是“怎么写更漂亮”，而是“怎么写能让渲染器少猜一点”。每个工具对同一段 HTML 的解释都像方言，你得按它的语法习惯来写，而不是按浏览器标准来写。
