
在 JSReport 中使用 Handlebars 渲染长表格时,因分页导致 tbody 末行底边框丢失;本文提供 CSS 解决方案,确保每页表格底部(含分页断点处)始终显示完整底边框。
在 jsreport 中使用 handlebars `{{#each}}` 动态渲染表格数据时,当表格内容跨页分页,tbody 的最后一行常因 css 边框规则缺失而丢失 `border-bottom`,导致视觉断裂——仅在整张表格真正结束时才有底边框,而分页截断处却空白。本文提供精准、轻量且兼容性良好的 css 修复方案。
该问题本质源于当前样式逻辑:您已通过 border: none !important 移除了所有 <td> 的默认边框,并仅保留左右边框(border-right / border-left),但未显式为每页末行的单元格添加底边框。而 tr:last-child td 选择器仅作用于整个 <tbody> 的最后一行(即全表结尾),无法覆盖分页后各页的局部末行。
✅ 正确解法是:强制为每页中 <tbody> 内实际可见的最后一行 <tr> 的所有 <td> 添加 border-bottom。由于 JSReport 底层基于 Chromium(Puppeteer/Playwright)生成 PDF,其分页行为遵循标准 CSS 分页规范,因此可借助 :last-child 结合明确的作用域实现稳定渲染:
/* 关键修复:为每页 tbody 中最后一行的单元格添加底边框 */
body .tabelaProdutos tbody tr:last-child td {
border-bottom: 1px solid #000 !important;
}⚠️ 注意事项:
- 该规则必须置于您现有 CSS 的末尾或更高优先级位置,以确保 !important 能覆盖之前 border: none 的声明;
- 不要改用 tr:last-of-type 或 :nth-last-child(1)——它们在分页上下文中不可靠;
- 若表格存在多级嵌套或动态插入行(如合计行),请确保合计行位于 <tbody> 内且不破坏 tr:last-child 的语义;
- 避免对 <thead> 或 <tfoot> 使用相同逻辑,否则可能在页首/页尾重复渲染边框。
? 进阶建议:若需更精细控制(例如页脚行加粗底边框),可为最后 N 行添加类名(如通过 Handlebars 辅助函数标记 isLastPageRow),但对绝大多数场景,上述单行 CSS 即可 100% 解决分页断点处底边框丢失问题。
最终效果:无论表格在第几页被截断,该页 <tbody> 的最后一行单元格均具备完整的 1px solid #000 底边框,与表格真正结束页保持视觉一致,符合财务/税务类报表的严谨排版要求。


















