css 实现跨页表格边框连续显示的完整方案：pdf 导出时表格跨页会导致上下边框断裂，本文提供基于 css `page-break` 和边框颜色控制的兼容性解决方案，确保分页处的表格顶部与底部边框完整可见。
在将 HTML 表格导出为 PDF（尤其通过浏览器“打印为 PDF”或 Puppeteer、wkhtmltopdf 等工具）时，一个常见问题是：当表格自动分页时，第一页表格的底边框和第二页表格的顶边框往往消失，造成视觉断裂。这是因为分页截断发生在 <tr> 或 <table> 边界处，而默认渲染引擎不会为“被切断”的边框补全样式。
根本解决思路是：主动控制分页位置，并在分页前后插入占位行，通过精细设置其边框颜色（如设为白色/透明）来“遮盖”多余边框，同时保留关键边框的显式绘制。
以下是经过验证的实用方案：
✅ 核心 CSS 规则
table {
border-collapse: collapse; /* 必须启用，避免双线边框干扰 */
width: 100%;
}
table, tr, td {
border: 1px solid #000; /* 统一基础边框，确保所有单元格有轮廓 */
}
/* 分页占位行：位于第一页末尾，需隐藏其下、左、右边框，仅保留上边框（即作为第一页的底边） */
.page-break {
page-break-after: always;
border-left-color: white;
border-right-color: white;
border-bottom-color: white;
/* 注意：border-top 保持默认黑色，构成第一页底部边框 */
}
/* 接续占位行：位于第二页开头，需隐藏其上、左、右边框，仅保留下边框（即作为第二页顶部边框） */
.page-break-next-row {
border-left-color: white;
border-right-color: white;
border-top-color: white;
/* border-bottom 保持默认黑色，构成第二页顶部边框 */
}✅ HTML 结构示例（关键：占位行必须独立且带 class）
<table>
<tr><td>数据行 1</td></tr>
<tr><td>数据行 2</td></tr>
<!-- ... 更多数据行 -->
<tr><td>数据行 N</td></tr>
<!-- 第一页结束占位行（强制分页，仅显示上边框） -->
<tr class="page-break">
<td class="page-break"></td>
</tr>
<!-- 第二页开始占位行（仅显示下边框） -->
<tr class="page-break-next-row">
<td class="page-break-next-row"></td>
</tr>
<!-- 后续数据行（从第二页起始） -->
<tr><td>数据行 N+1</td></tr>
<tr><td>数据行 N+2</td></tr>
</table>⚠️ 注意事项与优化建议
- page-break-after: always 仅对块级元素可靠：<tr> 在部分 PDF 引擎中可能不完全支持，若失效，可改用 <div style="page-break-after: always;"></div> 插入表格外部，但需配合 display: table-row 等 hack —— 推荐优先测试上述 <tr> 方案。
- 避免 border-collapse: separate：它会引入 border-spacing，导致分页边框错位。
- 颜色适配：若背景非白色，请将 white 替换为实际背景色（如 #ffffff 或 #f9f9f9），确保“隐藏”效果生效。
- 现代替代方案（推荐长期演进）：CSS Paged Media Module 提供了 break-inside: avoid 和更精细的 @page 控制，但当前主流 PDF 工具（如 Chrome 打印）对 break-before/break-after 在 <tr> 上的支持仍不稳定，故本方案具备更强兼容性。
- 自动化处理：在动态表格中，可通过 JavaScript 计算每页最大行数，在对应位置插入 .page-break 和 .page-break-next-row 行，提升可维护性。
该方案已在 Chrome、Edge 打印 PDF 及 wkhtmltopdf v0.12.x 中稳定生效，兼顾语义清晰性与跨工具兼容性，是解决表格跨页边框断裂问题的轻量级工业级实践。
立即学习“前端免费学习笔记（深入）”；
