我之前做类似的Handlebars+Playwright PDF生成需求时，也踩过表格跨页样式异常的坑，结合你的描述和代码，核心问题出在flex布局的表格破坏了浏览器原生分页逻辑、outline在分页时的表现远不如border，还有整体border-radius的设置方式导致跨页时出现奇怪的圆角截断。下面给你分步解决的方案：

一、先把表格换回原生布局，放弃Flex #

你现在把table、tr、tbody都设为flex容器，这会让Chromium（Playwright用的内核）完全忽略原生表格的分页规则，导致内容截断、背景/边框不跟随的问题。改用原生表格布局，浏览器会自动处理跨页的行拆分：

/* 重置table样式，去掉flex相关属性 */
table {
  padding: 12px 4px 4px; /* 保留你的内边距 */
  background: #faf9f8;
  font-size: 12px;
  width: 100%; /* 确保表格占满页面宽度，避免内容错位 */
  border-collapse: separate; /* 让单元格的border-radius能生效 */
  border-spacing: 0; /* 去掉单元格默认间距 */
  /* 用border代替outline，解决分页时边框异常 */
  border: 1px solid #e9e4e2;
  /* 先移除整体的border-radius，后面拆分到首尾行 */
}

/* 重置tr的flex布局，添加分页保护 */
tr {
  page-break-inside: avoid; /* 关键：避免单行被拆分成两页 */
}

/* 重置tbody的flex布局 */
tbody {
  /* 去掉所有flex相关属性 */
}

/* 把原来tr的padding转移到td上，保证内容内边距 */
td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e9e4e2; /* 保留行之间的分隔线 */
}

/* 去掉最后一行的底部分隔线 */
tbody tr:last-child td {
  border-bottom: none;
}

二、拆分圆角：第一页底部直角，表格末尾保留圆角 #

原来给整个table设border-radius会导致跨页时第一页的底部显示圆角（浏览器会渲染table整体框的下半部分），我们需要把圆角只给表格的第一行顶部和最后一行底部：

/* 表格顶部圆角：如果有thead就用thead，没有就换成tbody第一行 */
table thead tr:first-child th:first-child {
  border-top-left-radius: 12px;
}
table thead tr:first-child th:last-child {
  border-top-right-radius: 12px;
}

/* 表格底部圆角：只有整个表格的最后一行才生效 */
table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

如果你的表格没有thead，就把顶部圆角的选择器换成table tbody tr:first-child td:first-child和tr:first-child td:last-child。

三、修复PDF生成的细节问题 #

1. 替换outline为border：你之前用outline和outline-offset模拟边框，但outline是跟随元素的整体边界，在分页时不会正确断开，换成border后，浏览器会在分页处正确渲染边框断点，避免重叠。

2. 添加@page规则明确A4尺寸：

@page {
  size: A4;
  margin: 20mm; /* 按需调整边距，和Playwright的PDF设置保持一致 */
}

body {
  margin: 0;
  padding: 0;
}

3. 调试技巧：不用生成PDF也能预览分页效果：你说浏览器里预览是空白的（因为内容在Handlebars的script标签里），可以临时在Handlebars渲染完成后，把生成的HTML内容输出到一个静态文件（比如preview.html），然后用Chrome打开，按下Ctrl+P调出打印预览，选择A4尺寸，就能完美模拟Playwright生成PDF的效果，还能直接用开发者工具调试样式！

四、最后检查Playwright的PDF配置 #

确保生成PDF时开启printBackground: true，否则表格的背景色和边框不会被渲染：

// 示例Playwright代码
await page.pdf({
  path: 'your-report.pdf',
  format: 'A4',
  printBackground: true, // 必须开启
  margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' }
});

这样调整后，表格跨页时第一页的底部会是干净的直角，只有整个表格的最后一行才保留圆角，同时原生表格布局会让行正确拆分到不同页面，不会出现背景截断、边框重叠的问题。

内容来源于stack exchange