使用html-pdf包转换HTML为PDF时，实现跨页表格thead重复显示

我之前在使用html-pdf处理长表格时也遇到过一模一样的问题，折腾了一阵后终于找到靠谱的解决办法——其实核心是利用html-pdf底层依赖的PhantomJS支持的特定CSS属性，再配合正确的表格结构来实现。

核心CSS配置 #

PhantomJS对CSS的表格布局属性支持比较完善，只要给表头设置正确的display值，就能自动在分页时重复表头：

• 首先确保表格的基础布局稳定，推荐设置table-layout: fixed（可选，但能避免宽幅表格在分页时出现列宽错乱）
• 给thead添加display: table-header-group——这是实现跨页重复表头的关键属性
• 避免给thead或tr设置position: relative、float这类会破坏表格默认布局的样式

下面是完整的CSS+HTML示例：

<style>
  /* 全局重置表格样式，确保布局统一 */
  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 16px 0;
  }
  /* 核心：让表头在分页时重复 */
  thead {
    display: table-header-group;
    background-color: #f5f5f5; /* 可选，给表头加背景色区分 */
  }
  th, td {
    padding: 10px;
    border: 1px solid #e0e0e0;
    text-align: left;
  }
</style>

<!-- 示例长表格 -->
<table>
  <thead>
    <tr>
      <th>用户ID</th>
      <th>用户名</th>
      <th>注册时间</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里可以填充大量数据行，让表格跨页 -->
    <tr><td>1001</td><td>张三</td><td>2023-01-01</td><td>活跃</td></tr>
    <tr><td>1002</td><td>李四</td><td>2023-01-02</td><td>活跃</td></tr>
    <!-- ... 更多行 ... -->
  </tbody>
</table>

额外注意事项 #

1. 避免滚动容器包裹表格：如果表格被放在设置了overflow: auto或overflow: scroll的div里，PhantomJS无法识别分页，表头不会重复，一定要让表格处于流式布局中。
2. 检查html-pdf配置：生成PDF时尽量不要设置和表格表头冲突的全局header选项，否则会出现重复表头的叠加问题。示例配置如下：

const pdf = require('html-pdf');

pdf.create(htmlContent, {
  format: 'A4',
  orientation: 'portrait',
  border: '10mm'
}).toFile('./output.pdf', (err, res) => {
  if (err) return console.log(err);
  console.log(res);
});

3. 复杂表格的兼容处理：如果你的表格嵌套了复杂元素（比如合并单元格），可能需要调整border-collapse属性，或者简化嵌套结构，确保PhantomJS能正确识别表格的表头和主体部分。

如果按照上面的步骤操作，跨页表格的表头应该就能正常重复显示了。

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