如何实现HTML长表格打印时每页页眉不重叠且页脚固定？

问题分析 #

1. 页眉重叠：仅给第一页的表格容器添加margin-top，后续分页的表格没有预留顶部空间，固定定位的页眉直接覆盖表格内容。
2. 页脚问题：固定定位时未给表格底部预留空间，导致与最后一行重叠；不固定时，内容不满页则页脚会随表格停在页面中部。

修复方案 #

一、解决页眉重叠 #

• 用@page统一设置所有页面的上边距，为页眉预留固定空间，替代仅给第一页加margin的方式。
• 让表格表头在每页自动重复显示（可选但实用），避免后续页面看不到表头。

二、解决页脚定位 #

• 用@page设置页面下边距，让固定定位的页脚刚好落在预留区域，不与表格内容冲突。
• 调整页脚的位置和宽度，确保与页面内容对齐。
• 给表格添加底部margin，防止最后一页内容被页脚覆盖。

修改后的完整代码 #

CSS代码

/* 原有全局样式保留 */
.page {
  margin: 10px;
  padding: 20px;
  border: 1px solid #fff;
  background-color: #fff;
  page-break-after: always;
}

.container {
  padding: 5px;
}

.info {
  margin-bottom: -10px;
  font-size: 11px;
  line-height: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.date {
  float: right;
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 13.8px;
}

.text {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}

.title {
  font-weight: bold;
  font-size: 15px;
  margin-top: -11px;
  margin-bottom: 8px;
}

.description {
  font-size: 12.8px;
}

.title,
.description {
  line-height: 0.4;
}

table {
  margin-top: 11px;
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}

th {
  padding: 1px;
  text-align: left;
  background-color: #ffffff;
  line-height: 1.2em;
}

tr:first-child {
  border-top: 0.1px solid #000000;
  height: 5px;
}

body {
  line-height: 1.4;
}

h4 {
  font-size: 15px;
  margin-bottom: 10px;
}

table,
th,
td {
  font-size: 12px;
  border: 1px solid black;
}

table,
.page-footer {
  line-height: 1.4;
}

tr:nth-child(26n) {
  page-break-after: always;
}

.page-footer>div {
  display: inline-block;
}

/* 打印样式核心修改 */
@media print {
  /* 给所有页面设置上下边距，预留页眉页脚空间 */
  @page {
    margin-top: 150px; /* 数值匹配页眉实际高度 */
    margin-bottom: 50px; /* 数值匹配页脚实际高度 */
  }

  .header {
    position: fixed;
    top: 0;
    left: 20px; /* 和页面内边距对齐 */
    right: 20px;
    background-color: #fff; /* 防止下方内容透显 */
  }

  /* 让表头在每页打印时自动重复 */
  thead {
    display: table-header-group;
  }

  .page-footer {
    position: fixed;
    bottom: 0;
    left: 20px; /* 和页面内边距对齐 */
    right: 20px;
    padding: 3px 1px;
    background-color: #ffffff;
    border-top: 1px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
  }

  /* 给表格加底部margin，避免最后一页内容被页脚覆盖 */
  table {
    margin-bottom: 60px;
  }
}

HTML代码

<div class="header">
  <div class="info">
    <p>Text1 here<br> Text2 here<br> Text3 here</p>
  </div>
  <div class="date">
    <p>8.6.2023</p>
  </div>
  <div class="text">
    <p>Sorting by ID & Date</p>
  </div>
  <div class="title">
    <h4>History and Careplans </h4>
  </div>
  <div class="description">
    <p>This is an example table</p>
  </div>
</div>
<div class="table-container">
  <table>
    <colgroup span="1"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Meeting</th>
        <th rowspan="2">Nr</th>
        <th rowspan="2">T. ID</th>
        <th rowspan="2">No.</th>
        <th rowspan="2">Action/Event</th>
        <th rowspan="2">Interval</th>
        <th rowspan="2">Aids</th>
        <th colspan="3" scope="colgroup">Effort target</th>

        <th rowspan="2">Expense <br> Material</th>
        <th rowspan="2">Visa</th>
        <th rowspan="2">Execution date</th>
      </tr>
      <tr>
        <th>Height</th>
        <th>Standard [h]</th>
        <th>Species [h]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="2">2004 06</td>
        <td>1.010</td>
        <td></td>
        <td>Example</td>
        <td>Scope:387 cm Height: 28 m</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 这里添加更多表格行 -->
    </tbody>
  </table>
</div>
<!-- 页脚移出表格，放在正确位置 -->
<div class="page-footer">
  <div>302 T.</div>
  <div>Page 1 of 17</div>
</div>

关键修改说明 #

1. @page边距：统一控制所有页面的上下留白，确保页眉页脚有专属区域，不会与表格内容重叠。
2. 表头重复显示：通过thead { display: table-header-group; }让表头在每页显示，提升可读性。
3. 页脚位置调整：设置left和right值对齐页面内边距，避免宽度溢出。
4. 表格底部margin：防止最后一页的表格内容被固定页脚覆盖。
5. HTML结构修正：页脚不能放在<tbody>内，移出后符合HTML规范，避免渲染异常。

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