Html2Pdf转换PDF时表格border-collapse生效后border-top失效问题

这个问题我之前帮好几个开发者排查过，当用border-collapse: collapse设置表格合并边框后，很多PDF转换工具（比如Chrome打印PDF、wkhtmltopdf这类）的渲染逻辑会对单元格边框有特殊处理，导致table td { border-top: ... }不生效，这里给你几个靠谱的解决方案：

方案1：给表格行（tr）设置顶部边框 #

把原本给td的border-top转移到tbody的tr上，这样PDF引擎能更准确识别每行的顶部边框：

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
  font-size: 15px;
}
/* 给tbody里的每行设置顶部边框 */
tbody tr {
  border-top: 2px solid #AAAAAA;
}
/* 如果不需要第一行的顶部边框，可添加这个规则 */
tbody tr:first-child {
  border-top: none;
}

方案2：改用border-collapse: separate模式 #

如果你的场景允许放弃边框合并，改用border-collapse: separate并设置border-spacing: 0，这样每个td的边框是独立的，不会被合并逻辑干扰：

table {
  width: 100%;
  border-collapse: separate; /* 替换为separate */
  border-spacing: 0; /* 保持单元格间距为0，视觉效果和collapse一致 */
  margin-bottom: 20px;
  font-size: 15px;
}
table td {
  border-top: 2px solid #AAAAAA;
}

方案3：兜底设置表格基础边框 #

有些PDF引擎会优先识别表格本身的边框规则，给table添加border: 0避免默认边框干扰，同时确保td的边框属性被正确解析：

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
  font-size: 15px;
  border: 0; /* 清除表格默认边框 */
}
table td {
  border-top: 2px solid #AAAAAA;
}

为什么会出现这个问题？ #

当使用border-collapse: collapse时，PDF渲染引擎会把相邻单元格的边框合并计算，它会认为单元格的border-top是和上方单元格的border-bottom共享的样式，如果上方单元格没有定义对应的边框，引擎可能会忽略这个border-top的设置。而通过给行设置边框或者改用独立边框模式，就能绕开这个合并逻辑的坑。

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