如何通过window.print()打印HTML表格，仅首页显示表头

要实现仅在第一页显示表格表头、后续页面仅打印表体内容，核心是修改打印场景下表格表头（<thead>）的CSS显示属性，禁用浏览器默认的表头重复行为。

实现步骤 #

1. 保留屏幕端的正常表头展示，无需调整原有页面样式。
2. 针对打印场景添加媒体查询，修改<thead>的display属性，取消其默认的每页重复特性。

代码示例 #

HTML结构

<table class="report-table">
  <thead>
    <tr>
      <th>报表列1</th>
      <th>报表列2</th>
      <th>报表列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 大量报表数据行 -->
    <tr><td>数据行1-1</td><td>数据行1-2</td><td>数据行1-3</td></tr>
    <tr><td>数据行2-1</td><td>数据行2-2</td><td>数据行2-3</td></tr>
    <!-- 更多数据行... -->
  </tbody>
</table>

CSS样式

/* 屏幕显示时表头正常渲染 */
.report-table {
  width: 100%;
  border-collapse: collapse;
}
.report-table th, .report-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

/* 打印时禁用表头重复 */
@media print {
  .report-table thead {
    /* 将表头从"自动重复的页头组"改为普通行组，仅在第一页显示 */
    display: table-row-group;
  }

  /* 可选：避免单一行被拆分到两页，提升打印可读性 */
  .report-table tbody tr {
    page-break-inside: avoid;
  }
}

原理说明 #

浏览器默认会给<thead>设置display: table-header-group，该属性会让表头在表格跨页时自动重复显示。通过在打印媒体查询中将其改为display: table-row-group，表头会被当作普通表行组处理，仅随表格顶部在第一页显示，后续分页的内容仅包含<tbody>的行数据。

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