HTML转PDF时表格与页眉页脚重叠及分页异常问题求助

问题根源 #

1. 固定定位的页眉页脚脱离文档流，正文内容（尤其是表格）会直接覆盖在它们上面
2. 正文容器没有预留足够的上下空间，避开页眉页脚区域
3. 表格分页后，第二页缺少表头，且正文没有对齐页眉位置
4. HTML结构存在错误（thead内嵌套div是非法标签，会导致排版异常）

具体修改方案 #

1. 给正文预留页眉页脚空间

给body添加上下内边距，值对应页眉和页脚的高度，确保正文内容不会和固定定位的页眉页脚重叠：

body {
  font-family: Arial, sans-serif;
  padding-top: 120px;
  padding-bottom: 120px;
  margin: 0;
}

2. 让表格表头在分页后自动重复显示

给表格的thead设置CSS属性，确保每页顶部都显示表头：

.table thead {
  display: table-header-group;
}

3. 修正表格分页规则

移除.table-container的page-break-inside: always;，改为避免表格行被拆分到两页：

.table tr {
  page-break-inside: avoid;
}

4. 修复非法HTML结构

移除thead > tr内的<div class="header-space">&nbsp;</div>，这个标签不符合表格结构规范，会破坏表头布局。

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Invoice</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding-top: 120px;
        padding-bottom: 120px;
        margin: 0;
      }

      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #ccc;
        page-break-inside: avoid;
      }

      .invoice-details {
        margin-bottom: 10px;
      }

      .invoice-details p {
        margin: 0;
      }

      .table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 auto;
      }

      .table th,
      .table td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
        font-weight: bold;
      }

      .table th {
        background-color: #999999;
        font-weight: bold;
      }

      .table tr:nth-child(even) {
        background-color: #d3d3d3;
      }

      .table tr:hover {
        background-color: #ddd;
      }

      .table thead {
        display: table-header-group;
      }

      .table tr {
        page-break-inside: avoid;
      }

      .total-container {
        background-color: #444;
        display: inline-block;
        justify-content: flex-end;
        color: #fff;
        padding: 5px;
        text-align: center;
        margin-left: 60%;
      }

      .total {
        display: flex;
        justify-content: flex-end;
        margin-top: 5px;
      }

      .total p {
        font-weight: bold;
        margin-left: 10px;
      }

      .report-header {
        display: block;
        justify-content: center;
        margin-bottom: 20px;
      }

      .report-header h1 {
        font-size: 30px;
        text-align: center;
        margin: 0;
      }

      .report-header h2 {
        font-size: 15px;
        text-align: center;
        margin: 0;
      }

      .report-footer {
        display: flex;
        justify-content: center;
        margin-top: 30px;
      }

      .report-footer p {
        margin: 0;
      }

      .page-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: block;
        justify-content: center;
        height: 100px;
        background-color: #fff;
      }

      .page-header h2 {
        font-size: 20px;
        text-align: center;
      }

      .page-header p {
        margin: 20px;
      }

      .page-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        justify-content: center;
        height: 100px;
        background-color: #fff;
      }

      .page-footer p {
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="report-header">
        <h1>Company Primary Name</h1>
        <h2>Company Address Line 1</h2>
        <h2>Company Address Line 2</h2>
        <h2>Company Address Line 3</h2>
        <h2>Company Phone Number</h2>
      </div>
      <div class="invoice-details">
        <p>Invoice Date: May 1, 2023</p>
        <p>Due Date: May 31, 2023</p>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>Description</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Item 1</td>
            <td>2</td>
            <td>$10.00</td>
            <td>$20.00</td>
          </tr>
          <tr>
            <td>Item 2</td>
            <td>1</td>
            <td>$20.00</td>
            <td>$20.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
          <tr>
            <td>Item 3</td>
            <td>3</td>
            <td>$5.00</td>
            <td>$15.00</td>
          </tr>
        </tbody>
      </table>
      <div class="total-container">
        <div class="total">
          <p>Grand Total:</p>
          <p>$100.00</p>
        </div>
      </div>
      <div class="report-footer">
        <p>Company Email</p>
      </div>
    </div>
    <div class="page-header">
      <h2>Tax Invoice</h2>
    </div>
    <div class="page-footer">
      <p>Page Footer Text</p>
    </div>
  </body>
</html>

额外优化点 #

• 给固定的页眉页脚添加background-color: #fff，避免正文内容透过页眉页脚显示
• 将固定的页眉页脚移到container外部，避免容器的内边距影响它们的定位
• 移除了无效的.page-header-space等未使用的样式

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