打印CSS中重复表格固定tfoot与tbody内容重叠间距问题

给tfoot设置position: fixed; bottom: 0;的方案本身不适用打印分页场景：固定定位元素完全脱离正常文档流，浏览器计算打印分页内容高度时不会计入tfoot的占位，这也是你给各类元素加margin/padding都不生效的根本原因。

按以下步骤调整即可实现需求，保证tbody打印内容和tfoot之间稳定保留1cm间距：

• 第一步：删除tfoot上所有固定定位相关样式，让tfoot回归表格默认文档流
• 第二步：通过@page规则配置打印页边距，提前为tfoot预留占位空间：

@page {
  /* 按实际使用场景替换纸张尺寸，以下为常用A4纸示例 */
  size: A4;
  /* 底部边距设为1.5cm，其中1cm为内容与tfoot的间距，0.5cm为冗余边距避免内容被打印裁切 */
  margin: 2cm 1.5cm 1.5cm 1.5cm;
}

• 第三步：配置表格分页渲染规则，这是解决最后一页tfoot不沉底的核心：

table {
  border-collapse: collapse;
  width: 100%;
}
tfoot {
  /* 标记元素为表格页脚组，打印时会自动在每一页底部重复渲染 */
  display: table-footer-group;
  break-inside: avoid; /* 避免tfoot本身被分页截断 */
}
tbody {
  break-inside: auto;
}
tr {
  break-inside: avoid; /* 避免单行表格内容被拆分到两页 */
}

• 第四步：给tfoot单元格设置顶部内边距，精准控制间距：

tfoot td {
  padding-top: 1cm;
  /* tfoot原有边框、背景、文字样式可正常保留，不受影响 */
}

避坑提示：打印场景下的重复表头、表尾不要用普通网页的fixed/absolute定位实现，这类定位脱离文档流后，浏览器分页引擎不会自动计算其占位，必然会出现随机重叠、位置偏移问题。原生表格的table-header-group/table-footer-group属性是专门为这类场景设计的，浏览器会自动为每页的头尾预留对应位置，不需要手动计算高度适配，Chrome、Edge、Firefox等主流浏览器的打印功能均完整支持该规则。

问题描述的重叠效果参考：

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