在将含长表格的网页导出为 pdf 时，表格跨页断裂会导致页尾无底边框、页首无顶边框。本文提供一套兼容主流 pdf 生成工具（如 chrome 打印、wkhtmltopdf）的纯 css 解决方案，通过智能控制分页行与相邻单元格的边框颜色，确保跨页处边框视觉连续。
当浏览器或 PDF 生成引擎对表格进行分页时，它会将 <tr> 拆分到不同页面，但默认不会为“断开处”自动补全缺失的边框——这导致第一页表格底部缺失 border-bottom，第二页顶部缺失 border-top，视觉上出现边框中断。
核心思路是：用空白占位行（<tr>）主动触发分页，并精确控制其上下相邻行的边框颜色，模拟连续边框效果。关键在于利用 page-break-after: always 强制分页，并通过 border-color: white（或与背景色一致的颜色）隐藏特定方向的边框，使相邻行的对应边框“显露”出来，形成无缝衔接。
以下为推荐实现代码：
table {
border-collapse: collapse; /* 必须启用，避免双线边框 */
width: 100%;
}
table, tr, td, th {
border: 1px solid #000; /* 统一边框样式，建议用具体颜色而非 'solid' */
padding: 8px;
}
/* 分页占位行：强制分页，并隐藏自身左右及底边框 */
.page-break {
page-break-after: always;
border-left-color: white;
border-right-color: white;
border-bottom-color: white;
}
/* 紧随其后的首行：隐藏左右及顶边框，让上一行的底边框（即分页行的 visible bottom）与本行 top 共同构成完整分隔线 */
.page-break-next-row {
border-left-color: white;
border-right-color: white;
border-top-color: white;
}HTML 结构需配合使用：
立即学习“前端免费学习笔记（深入）”；
<table>
<tr><td>数据行 1</td></tr>
<tr><td>数据行 2</td></tr>
<!-- ... 更多数据行 ... -->
<tr class="page-break">
<td> </td> <!-- 空单元格，高度可设为 0 或 1px，仅作分页锚点 -->
</tr>
<tr class="page-break-next-row">
<td> </td> <!-- 同样为空，确保下一页首行顶边框不重复显示 -->
</tr>
<tr><td>数据行 N+1（新页首行）</td></tr>
<tr><td>数据行 N+2</td></tr>
</table>✅ 注意事项与优化建议：
- 背景色适配：若页面背景非白色，请将 white 替换为实际背景色（如 #ffffff 或 #f9f9f9），否则隐藏边框会暴露为白色裂痕；
- 打印媒体查询封装：建议将上述样式包裹在 @media print 中，避免影响屏幕显示；
- 现代替代方案：CSS Paged Media Module Level 3 提供了 break-inside: avoid 和 border-spacing 控制能力，但目前 Chrome / wkhtmltopdf 支持有限，本方案兼容性更优；
- 行高控制：.page-break 行高度可通过 height: 0; line-height: 0; font-size: 0; 进一步压缩，防止多余空白；
- 表头重复？ 若需每页显示表头，应结合 <thead> + display: table-header-group，但注意其与分页占位行的兼容性，建议单独测试。
该方案无需 JavaScript，零依赖，已在 Chrome DevTools → Print Preview、Electron PDF 导出及 wkhtmltopdf 0.12.x+ 环境中稳定验证。只要合理插入分页锚点，即可实现专业级 PDF 表格边框连续呈现。
