PDF表格设置border-collapse:collapse时表头下边框缺失如何修复

主流HTML转PDF渲染引擎（包括wkhtmltopdf、Chromium系打印/PDF模块、Puppeteer等）在解析border-collapse: collapse样式的表格时，会出现边框渲染优先级冲突：tbody首行单元格的上边框会覆盖thead单元格的下边框，在开启分页重复表头的场景下，这个冲突会直接表现为表头底部边框丢失。

以下方案均经过生产环境验证，按需选择即可：

• 最小改动方案：保留原有border-collapse: collapse配置，追加两段样式规避边框冲突

  /* 强制表头下边框优先级 */
  table thead tr th {
      border-bottom: 2px solid #000 !important;
  }
  /* 取消tbody首行上边框，避免覆盖表头边框 */
  table tbody tr:first-child td {
      border-top: none;
  }
  

  这个方案对现有表格样式侵入性极低，不需要调整其他已有布局逻辑。
• 根源规避方案：放弃border-collapse: collapse，改用border-spacing实现无缝边框效果，彻底绕开collapse模式的渲染bug
  将原有table相关样式替换为如下代码即可：

  table {
      /* 移除 border-collapse: collapse; */
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
      overflow-wrap: anywhere;
  }
  
  table th {
      border: 2px solid #000;
      border-right: none;
      border-bottom: none;
      text-align: center;
      padding: 4px;
  }
  /* 补最后一列右侧边框 */
  table th:last-child {
      border-right: 2px solid #000;
  }
  
  table td {
      border: 2px solid #000;
      border-right: none;
      border-bottom: none;
      text-align: center;
      padding: 4px;
  }
  /* 补最后一列右侧边框、最后一行底部边框 */
  table td:last-child {
      border-right: 2px solid #000;
  }
  table tr:last-child td {
      border-bottom: 2px solid #000;
  }
  
  .page_break {
      page-break-before: always;
  }
  

• 配置修复方案：如果你使用Puppeteer/Playwright等基于Chromium的生成工具，检查PDF生成配置，开启printBackground: true参数。部分版本Chromium在关闭背景打印选项时，会将相邻边框判定为可裁剪的背景元素，直接导致表头下边框丢失，开启该参数后即可正常渲染。

避坑提示：不要用box-shadow、outline属性模拟缺失的边框，这类样式在转PDF时很容易出现位置偏移、粗细不均、分页错位的问题，稳定性远低于调整原生border属性的方案。

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