HTML打印实现每页重复Table A及Table B表头并解决重叠问题

需求回顾 #

打印时要求每页先完整显示Table A，再展示Table B的内容；由于Table B数据量大，其表头需要随分页自动重复显示。原CSS实现导致第二页开始Table B与Table A重叠，以下是修复方案。

修复后的代码实现 #

打印专用CSS #

@media print {
  /* 确保Table A完整显示，不被分页拆分 */
  .table-a-container {
    page-break-inside: avoid;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em;
  }

  /* 固定Table A在每页顶部，作为打印页眉 */
  .table-a-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* 设置页面顶部边距，容纳固定的Table A */
  @page {
    margin-top: 7cm; /* 根据Table A实际高度调整，确保完整显示后有空间放Table B */
    margin-bottom: 2cm;
  }

  /* 给Table B容器设置顶部边距，避开固定的Table A */
  .table-b-container {
    margin-top: 6cm; /* 与@page的margin-top匹配，略小一点确保无间隙 */
  }

  /* 让Table B的表头在分页时自动重复 */
  .table-b-container table thead {
    display: table-header-group;
  }

  /* 可选：隐藏屏幕上的无关元素，仅保留打印内容 */
  body *:not(.s-table-container):not(.s-table-container *) {
    display: none;
  }
}

调整后的HTML结构（为容器添加区分类名） #

<div class="s-table-container table-a-container">
<table class="s-table">
<thead>
<tr>
<th>Table A Header1</th>
<th>Table A Header 2</th>
<th>Table A Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content A1</td>
<td>Content A2</td>
<td>Content A3</td>
</tr>
<tr>
<td>Content A4</td>
<td>Content A5</td>
<td>Content A6</td>
</tr>
</tbody>
</table>
</div>

<div class="s-table-container table-b-container">
<table class="s-table">
<thead>
<tr>
<th>Table B Header1</th>
<th>Table B Header 2</th>
<th>Table B Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content B1</td>
<td>Content B2</td>
<td>Content B3</td>
</tr>
<tr>
<td>Content B4</td>
<td>Content B5</td>
<td>Content B6</td>
</tr>
<!-- 可添加更多行测试分页效果 -->
</tbody>
</table>
</div>

核心修复要点 #

1. 固定Table A到页眉：使用position: fixed将Table A锁定在每页顶部，同时设置白色背景避免下方内容穿透。
2. 调整页面边距与内容间距：通过@page的margin-top预留足够空间容纳Table A，再给Table B容器设置对应的margin-top，彻底避免重叠。
3. 原生表头重复：利用浏览器打印的原生特性thead { display: table-header-group; }，让Table B的表头随分页自动重复。
4. 保护Table A完整性：page-break-inside: avoid确保Table A不会被分页拆分，始终完整显示在每页顶部。

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