在将含长表格的网页导出为 pdf 时，表格跨页断裂会导致页尾无底边框、页首无顶边框。本文提供一套兼容主流 pdf 生成工具（如 chrome 打印、wkhtmltopdf）的纯 css 解决方案，通过智能控制分页行与相邻单元格的边框颜色，确保跨页处边框视觉连续。
当浏览器或 PDF 生成引擎对表格进行分页时，它会将
核心思路是：用空白占位行（
以下为推荐实现代码：
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 结构需配合使用：
数据行 1 数据行 2 数据行 N+1（新页首行） 数据行 N+2
✅ 注意事项与优化建议：
- 背景色适配：若页面背景非白色，请将 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; 进一步压缩，防止多余空白；
- 表头重复？ 若需每页显示表头，应结合
+ display: table-header-group，但注意其与分页占位行的兼容性，建议单独测试。
该方案无需 javaScript，零依赖，已在 chrome devtools → Print Preview、electron PDF 导出及 wkhtmltopdf 0.12.x+ 环境中稳定验证。只要合理插入分页锚点，即可实现专业级 PDF 表格边框连续呈现。