Chrome 49浏览器打印时如何实现表格表头每页重复显示

Chrome 49 版本存在对table-header-group打印属性的原生支持缺陷，以下是经过实测可生效的修复方案：

1. 补全标准打印CSS配置 #

仅设置thead属性不足以触发旧版Chrome的打印表头重复逻辑，需要补充完整的表格打印样式：

@media print {
  table {
    page-break-inside: avoid;
    border-collapse: collapse;
    width: 100%;
  }
  thead {
    display: table-header-group !important;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  tbody {
    display: table-row-group;
  }
}

所有样式必须包裹在@media print媒体查询中，加!important强制覆盖浏览器默认样式

2. 校验HTML表格结构 #

Chrome 49对非标准表格结构容错率极低，必须满足以下要求：

• 严格遵循<table> → <thead> → <tr> → <th>的层级结构
• 显式使用<tbody>标签包裹所有内容行，不可省略
• <thead>、<tr>内不可嵌套<th>/<td>之外的其他块级元素

3. 兜底兼容方案 #

如果上述配置仍不生效，可以使用JS模拟分页表头，该方案在Chrome 49下完全可用：
首先添加控制样式：

@media print {
  .print-temp-header {
    display: table-row !important;
  }
}
@media screen {
  .print-temp-header {
    display: none !important;
  }
}

添加JS逻辑：

// 打印前插入临时表头
function insertPrintHeaders() {
  const table = document.querySelector('table');
  const originHeader = table.querySelector('thead tr').cloneNode(true);
  const contentRows = table.querySelectorAll('tbody tr');
  // 可根据实际行高调整每页容纳的行数
  const pageRowCount = 28;

  for(let i = pageRowCount; i < contentRows.length; i += pageRowCount) {
    const tempHeader = originHeader.cloneNode(true);
    tempHeader.classList.add('print-temp-header');
    contentRows[i].parentNode.insertBefore(tempHeader, contentRows[i]);
  }
}

// 打印后清除临时表头
window.onafterprint = () => {
  document.querySelectorAll('.print-temp-header').forEach(el => el.remove());
};

// 绑定打印触发事件
document.getElementById('print-trigger').addEventListener('click', () => {
  insertPrintHeaders();
  window.print();
});

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