嘿，这个打印样式的坑我之前踩过好几次，咱们直接上可行的解决方案，分两种场景给你参考：

通用兼容方案（适配绝大多数浏览器） #

这个方案不需要依赖前沿CSS特性，不管是Chrome、Firefox还是Edge都能很好支持：

/* 专门针对打印场景的样式 */
@media print {
  /* 强制表格行不被分页拆分，避免行跨两页的情况 */
  tr {
    page-break-inside: avoid;
  }

  /* 给表格设置合并边框，确保样式统一 */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* 给除了表格第一行之外的所有单元格添加顶部边框 */
  tr:not(:first-child) td {
    border-top: 1px solid #000;
  }

  /* 通过内边距模拟行顶部间距，数值可以按需调整 */
  tr td {
    padding: 8px 4px;
  }

  /* 第一行的顶部内边距可以去掉，避免和页面顶部间距重复 */
  tr:first-child td {
    padding-top: 0;
  }
}

为什么这个方案有效？ #

• page-break-inside: avoid保证整行内容不会被拆分到两页，新页面的起始行一定是完整的一行；
• tr:not(:first-child)精准选中所有非首行，不管它在第一页还是后续分页，都会带上顶部边框和内边距，完美解决新页行样式缺失的问题；
• 用单元格（td）设置边框比直接给行（tr）设置更稳妥，避免border-collapse模式下的样式冲突。

精准分页方案（适合支持前沿CSS的浏览器） #

如果你的目标浏览器都是较新版本（比如Chrome 101+、Edge 101+），可以用:has()选择器更精准地控制分页后的行样式：

@media print {
  tr {
    page-break-inside: avoid;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* 当某一行后面发生分页时，确保分页逻辑正常 */
  tr:has(+ tr) {
    break-after: auto;
  }

  /* 给分页后的首行添加特殊样式（比如加粗边框+更大间距） */
  tr:nth-of-type(n+2) td {
    border-top: 2px solid #000;
    padding-top: 12px;
  }
}

额外注意事项 #

1. 测试时一定要用浏览器的打印预览功能（不要直接打印），不同浏览器的分页逻辑略有差异；
2. 如果页面有多个表格，建议给目标表格加个专属类（比如print-target-table），用.print-target-table tr来选中行，避免样式污染其他表格；
3. 如果表格是动态生成的（比如JS渲染），确保样式能正确应用到所有渲染后的行。

内容的提问来源于stack exchange，提问作者F1Cab Service