首先得明确一个原生HTML的限制：单个<table>只能有一个<thead>，而且浏览器只会重复这个唯一的thead内容。所以要实现主表头每页重复 + 分区表头在自身分区跨页时重复的需求，我们需要调整页面结构，结合CSS打印样式来达成目标。

核心思路 #

把每个分区拆成独立的<table>，每个table的<thead>里同时包含主表头行和对应分区的表头行。这样当某个分区的内容跨页时，该table的整个thead（两行）都会自动重复，既保证了主表头每页都有，也实现了分区表头在自身分区内的重复显示。

具体实现代码 #

1. 打印专用CSS样式

/* 全局样式（可选，统一表格边框） */
table, th, td {
  border: 1px solid #333;
  border-collapse: collapse;
  padding: 8px;
}

/* 打印时的特殊样式 */
@media print {
  table {
    width: 100%;
    margin: 0;
  }
  /* 强制thead在每页打印时重复 */
  thead {
    display: table-header-group;
  }
  /* 避免单行内容被分页截断 */
  tr {
    page-break-inside: avoid;
  }
  /* 允许tbody内的内容分页 */
  tbody {
    page-break-inside: auto;
  }
}

/* 屏幕显示时的优化（可选：只显示一次主表头） */
@media not print {
  /* 隐藏每个分区table里的主表头行 */
  .section-table thead tr:first-child {
    display: none;
  }
}

2. 调整后的HTML结构

<!-- 屏幕上只显示一次的主表头 -->
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
</table>

<!-- 第一分区表格 -->
<table class="section-table">
  <thead>
    <!-- 主表头行（打印时显示，屏幕上隐藏） -->
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <!-- 第一分区专属表头行 -->
    <tr>
      <th>Header 1 for 1st section</th>
      <th>Header 2 for 1st section</th>
      <th>Header 3 for 1st section</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1st section line 1</td><td></td><td></td></tr>
    <tr><td>1st section line 2</td><td></td><td></td></tr>
    <tr><td>1st section line 3</td><td></td><td></td></tr>
    <!-- 可以添加更多行测试跨页效果 -->
  </tbody>
</table>

<!-- 第二分区表格 -->
<table class="section-table">
  <thead>
    <!-- 主表头行（打印时显示，屏幕上隐藏） -->
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <!-- 第二分区专属表头行 -->
    <tr>
      <th>Header A for 2nd section</th>
      <th>Header B for 2nd section</th>
      <th>Header C for 2nd section</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>2nd section line 1</td><td></td><td></td></tr>
    <tr><td>2nd section line 2</td><td></td><td></td></tr>
    <tr><td>2nd section line 3</td><td></td><td></td></tr>
    <!-- 可以添加更多行测试跨页效果 -->
  </tbody>
</table>

关键细节说明 #

• 拆分独立表格：每个分区用单独的<table>，让浏览器可以独立处理每个表格的表头重复逻辑。
• table-header-group：这是实现表头重复的核心CSS属性，现代浏览器（Chrome、Firefox、Edge）和主流PDF打印工具都支持。
• 屏幕显示优化：通过@media not print隐藏分区表格里的重复主表头，保证页面在屏幕上的简洁性；打印时则自动显示完整的两层表头。

测试建议 #

在浏览器的打印预览功能里测试效果，不同的PDF生成工具可能有细微差异，若遇到边框重复问题，可以调整CSS的边框样式（比如给table设置border-top: none来避免相邻表格的顶部边框重叠）。

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