Chrome 115打印PDF（A3格式）时表头与内容重叠问题

问题描述 #

在Chrome 115.0.5790.110 64位浏览器中，将包含<table>元素的HTML页面以A3格式打印并保存为PDF时，第二页出现表头与内容重叠的异常情况。

复现步骤 #

• 将目标HTML代码保存为本地table.html文档
• 使用Chrome 115.0.5790.110 64位打开该文档
• 按下Ctrl+P打开打印对话框，选择“另存为PDF”并设置纸张格式为A3

解决方案 #

1. 添加打印专用CSS样式 #

通过自定义打印媒体查询样式，修复表头重复渲染时的重叠问题：

@media print {
  /* 强制表头在每页顶部重复显示 */
  thead {
    display: table-header-group;
  }
  /* 避免表格行被分页截断 */
  tr {
    page-break-inside: avoid;
  }
  /* 替换border-collapse为separate，消除边框重叠引发的布局问题 */
  table {
    border-collapse: separate;
    border-spacing: 0;
  }
  /* 若仍存在重叠，给第二页的表格内容添加上边距 */
  tbody tr:first-child td {
    padding-top: 20px !important;
  }
}

2. 调整Chrome打印设置 #

• 打开打印对话框后，进入「更多设置」，取消勾选「页眉和页脚」选项，避免浏览器默认页眉与表格表头冲突
• 在「缩放」选项中选择「适合」，或微调百分比，确保内容完全适配A3纸张尺寸

3. 清理表格异常样式 #

检查并移除表格或表头元素上的position: fixed、负margin等样式，这类样式在屏幕显示正常，但会干扰打印时的布局计算，导致重叠。

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