在将含长表格的网页导出为 pdf 时，表格跨页断裂会导致页尾无底边框、页首无顶边框。本文提供一套兼容主流 pdf 生成工具（如 chrome 打印、wkhtmltopdf）的纯 css 解决方案，通过智能控制分页行与相邻单元格的边框颜色，确保跨页处边框视觉连续。

当浏览器或 PDF 生成引擎对表格进行分页时，它会将

拆分到不同页面，但默认不会为“断开处”自动补全缺失的边框——这导致第一页表格底部缺失 border-bottom，第二页顶部缺失 border-top，视觉上出现边框中断。

核心思路是：用空白占位行（）主动触发分页，并精确控制其上下相邻行的边框颜色，模拟连续边框效果。关键在于利用 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 结构需配合使用：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成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; 进一步压缩，防止多余空白；
• 表头重复？ 若需每页显示表头，应结合 + display: table-header-group，但注意其与分页占位行的兼容性，建议单独测试。

  该方案无需 JavaScript，零依赖，已在 Chrome DevTools → Print Preview、Electron PDF 导出及 wkhtmltopdf 0.12.x+ 环境中稳定验证。只要合理插入分页锚点，即可实现专业级 PDF 表格边框连续呈现。