分页时将HTML表格折至页面另一侧并重复嵌套表头

核心思路 #

利用CSS原生多列布局和打印媒体查询，配合区块拆分实现表格折栏，同时保证主、子表头随数据组自动重复显示，完全基于基础HTML/CSS，无需任何外部库。

实现代码 #

HTML结构

<div class="table-container">
  <!-- 公司A分组 -->
  <div class="company-group">
    <h3 class="main-heading">Heading 1 Company A</h3>
    <!-- 分支A数据组 -->
    <div class="branch-group">
      <h4 class="sub-heading">Heading 1.1 Branch A</h4>
      <table class="data-table">
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>数据1-1</td><td>数据1-2</td></tr>
          <tr><td>数据2-1</td><td>数据2-2</td></tr>
          <tr><td>数据3-1</td><td>数据3-2</td></tr>
          <!-- 可添加更多数据行 -->
        </tbody>
      </table>
    </div>
    <!-- 分支B数据组 -->
    <div class="branch-group">
      <h4 class="sub-heading">Heading 1.2 Branch B</h4>
      <table class="data-table">
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>数据4-1</td><td>数据4-2</td></tr>
          <tr><td>数据5-1</td><td>数据5-2</td></tr>
          <!-- 可添加更多数据行 -->
        </tbody>
      </table>
    </div>
  </div>

  <!-- 公司B分组 -->
  <div class="company-group">
    <h3 class="main-heading">Heading 2 Company B</h3>
    <!-- 分支C数据组 -->
    <div class="branch-group">
      <h4 class="sub-heading">Heading 2.1 Branch C</h4>
      <table class="data-table">
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>数据6-1</td><td>数据6-2</td></tr>
          <tr><td>数据7-1</td><td>数据7-2</td></tr>
          <tr><td>数据8-1</td><td>数据8-2</td></tr>
          <!-- 可添加更多数据行 -->
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS样式

/* 通用页面样式 */
.table-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.company-group {
  margin-bottom: 1.5rem;
}
.main-heading, .sub-heading {
  margin: 0;
  padding: 0.6rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
}
.data-table thead {
  background-color: #f8f8f8;
}

/* 打印专属样式 */
@media print {
  .table-container {
    column-count: 2; /* 设置为2列，可根据纸张宽度调整为3列等 */
    column-gap: 1.2rem;
  }
  /* 禁止公司/分支区块被拆分到两列，保证数据与表头的完整性 */
  .company-group, .branch-group {
    break-inside: avoid;
  }
  /* 强制表格表头在跨列/跨页时重复显示 */
  .data-table thead {
    display: table-header-group;
  }
  /* 隐藏页面端的多余边距，适配打印 */
  body {
    margin: 0;
    padding: 0;
  }
}

关键特性说明 #

• 多栏折行：通过column-count在打印模式下将内容自动拆分为多列，直接减少打印页数。
• 嵌套表头重复：将每个公司、分支的数据封装为独立区块，break-inside: avoid确保区块不会被拆分，进入新列时区块自带的主/子表头会自动显示。
• 表格表头重复：display: table-header-group是CSS原生属性，强制表格的<thead>在打印时（包括跨列、跨页）重复渲染，保证每列/每页都有表格列标题。
• 纯基础实现：仅使用原生HTML标签和CSS属性，无任何外部依赖，完全符合需求。

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