如何使用Javascript为打印时的跨页表格添加每页顶部垂直内边距

可以实现，不需要拆分原有表格，结合CSS打印规则和少量原生JS即可满足需求，优先推荐纯CSS方案，实现成本最低：

方案1：纯CSS实现（优先推荐） #

利用浏览器原生的打印样式规则即可实现，无需编写JS：

• 如果你只需要表格跨页后的表头顶部留白，直接给重复表头添加上内边距即可，所有跨页自动生成的表头都会自带该边距：

@media print {
  /* 跨页表头的顶部安全边距，单位用mm适配打印场景更精准 */
  thead tr:first-child th {
    padding-top: 20mm !important;
  }
  /* 第一页的表头不需要额外边距的话可以单独覆盖 */
  @page :first {
    thead tr:first-child th {
      padding-top: 0 !important;
    }
  }
}

• 如果你需要所有打印页的顶部都有统一安全边距，直接修改全局打印页边距即可：

@media print {
  @page {
    margin-top: 15mm; /* 顶部安全边距 */
    margin-bottom: 15mm;
    margin-left: 10mm; /* 你已经实现的水平安全边距也可以放在这里统一控制 */
    margin-right: 10mm;
  }
}

方案2：原生JS动态适配（应对复杂场景） #

如果你的表格内容是完全动态生成的，高度不固定，或者存在特殊样式冲突导致CSS方案不生效，可以用JS在打印前预处理分页位置：

function setPrintTopMargin(table, pageContentHeight = 980) {
  // pageContentHeight为A4纸可打印内容高度，96dpi下约为980px，可按需调整
  let totalHeight = 0;
  const rows = table.querySelectorAll('tr');
  rows.forEach(row => {
    const rowHeight = row.offsetHeight;
    // 检测当前行是否跨页
    if (totalHeight + rowHeight > pageContentHeight) {
      row.style.paddingTop = '20mm';
      // 重置累计高度，加上新增的边距值
      totalHeight = rowHeight + 75; // 75为20mm对应px近似值，和上边距保持一致
    } else {
      totalHeight += rowHeight;
      row.style.paddingTop = '0';
    }
  })
}

// 打印触发前执行计算
const targetTable = document.querySelector('#你的表格ID');
window.addEventListener('beforeprint', () => {
  setPrintTopMargin(targetTable);
});

// 打印完成后恢复样式，不影响页面正常显示
window.addEventListener('afterprint', () => {
  targetTable.querySelectorAll('tr').forEach(row => row.style.paddingTop = '');
});

注意事项 #

• 打印相关的尺寸优先使用mm、pt这类打印专用单位，避免不同DPI的设备出现尺寸偏移
• Chrome、Firefox、Edge等主流浏览器均已支持thead跨页重复、@page规则和beforeprint/afterprint事件，无需额外兼容
• 两种方案都不需要修改原有表格结构，也不需要拆分表格，你现有的自动重复表头逻辑可以完全保留

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