网页打印时表格内容与footer重叠及数据缺失问题求助

针对你遇到的表格数据过多导致打印时和Footer重叠、部分数据缺失的问题，直接用CSS打印媒体查询就能搞定，实现类似出院小结每页底部都有Footer的效果：

核心CSS代码 #

/* 针对打印场景的样式 */
@media print {
  /* 定义页面边距，给底部Footer留出足够空间 */
  @page {
    margin: 2cm 1cm 3cm; /* 底部边距要大于Footer高度，避免重叠 */
  }

  /* 让Footer固定在每页底部 */
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2cm; /* 根据你的Footer实际高度调整 */
    background-color: #fff; /* 用白色背景覆盖下方内容，防止穿透 */
    border-top: 1px solid #ccc; /* 可选，加个分隔线区分内容和Footer */
    padding: 10px; /* 可选，调整内边距 */
  }

  /* 让表格内容自动分页，避免行被截断 */
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid; /* 禁止单一行被拆分到两页 */
  }

  /* 可选：让表头在每页打印时重复显示 */
  thead {
    display: table-header-group;
  }
}

关键说明 #

1. 页面边距设置：@page的底部边距必须大于Footer的高度，这样表格内容不会延伸到Footer的固定区域里，解决重叠问题。
2. Footer固定定位：在@media print里给Footer设置position: fixed，浏览器会自动在每一页的底部渲染这个Footer。
3. 表格分页优化：page-break-inside: avoid避免表格行被拆分到两页，防止数据缺失或显示不全。

把这段CSS加到你的页面样式里，然后通过浏览器打印预览测试，根据实际显示效果调整Footer高度和页面边距的数值即可。

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