@media print 环境下表格无法自动分页问题求助

问题原因 #

当前打印样式里的两个设置直接导致表格无法自动分页：

1. .section 设置了固定 height: 580px，内容超出这个高度后会被截断，无法延伸到下一页。
2. .table-container 加了 page-break-inside: avoid，强制浏览器避免在容器内分页，直接阻止了表格跨页显示。

修改后的打印样式 #

@media print {
  @page {
    margin: 10px;
  }
  
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 240px;
  }
  
  .section {
    margin-top: 300px;
    margin-bottom: 250px;
    padding-top: 10px;
    /* 移除固定高度，让内容自然延伸 */
  }
  
  .table-container {
    overflow-x: visible;
    /* 移除page-break-inside: avoid，允许容器内分页 */
  }

  /* 可选：避免表格行被拆分到两页 */
  table tr {
    page-break-inside: avoid;
  }
}

关键修改说明 #

• 去掉.section的固定高度：让内容区能根据表格行数自动扩展，超出一页时自然触发分页。
• 删除.table-container的page-break-inside: avoid：解除容器的分页限制，允许表格跨页显示。
• 新增table tr的page-break-inside: avoid（可选）：确保表格的整行不会被拆分在两页之间，提升打印可读性。

修改后，表格内容会在第一页填满.section的可用空间后，自动分页到第二页，实现你期望的1-13在第一页、14-17在第二页的效果。

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