Table 在 chrome 中打印时，thead 和 tfoot 布局不正确

Question

我在 linux alpine 上使用 puppeteer 生成 pdf。我使用 thead tbody tfoot 技巧在每个页面上获得正确的页眉和页脚。

我注意到 chrome 和 chromium 在打印时的布局方式有些奇怪。即，在呈现 table.

时跳过第一页

这是一个重现（在 Ubuntu 18.04 上针对 Chrome 73.0.3683.75 进行了测试，可能很重要，因为重现有点难，而且字体渲染可能会影响布局）。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    thead {
      display: table-header-group;
    }
    
    tfoot {
      display: table-footer-group;
    }
    
    table {
      border-collapse: collapse;
    }
    
    html,
    body,
    table,
    tr,
    td {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
    }
  </style>
</head>

<body>
  <table>
    <thead style="background:#fcc">
      <tr>
        <td>
          <div style="height: 231px">head</div>
        </td>
      </tr>
    </thead>
    <tbody style="background:#cfc">
      <tr>
        <td>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </td>
      </tr>
      <tr>
        <td>widow</td>
      </tr>
    </tbody>
    <tfoot style="background:#ccf">
      <tr>
        <td>
          <div style="height:231px">foot</div>
        </td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

请注意，当加载此页面并按下 ctrl+p 时，table 开始在文档 https://i.imgur.com/nFEl6XX.png 的第二页上呈现。我希望它从第一页开始。是否有 css 规则，例如 page-break-inside: do-it-please-instead-of-messing-up-my-table?

编辑：忘记设置，使用页边距 None 重现问题 https://i.imgur.com/61gPr0o.png

另外，一个无关紧要的问题：删除第二个 table 行 <tr><td>widow</td></tr>，显示另一个意外的渲染工件：https://i.imgur.com/lLpa4yH.png。在这里，tbody 开始在第一页呈现，但将 tfoot 推送到第二页。在这种情况下，我也希望 tbody 中断。

Answer 1

为此向 Chromium 团队报告了一个错误： https://bugs.chromium.org/p/chromium/issues/detail?id=962435#c13

不幸的是（但也许不足为奇）这并不是真正的优先事项。我最终将 puppeteer 换成 openhtmltopdf，它可以更好地处理运行页眉和页脚。

还制作了一个包装器，以便人们可以直接在微服务环境中使用它：https://github.com/modfin/betterpress

Answer 2

我们遇到了同样的问题。有一个很好的解决方法。只要您创建一个带有 rowspan 的 td，它就可以正常工作。查看下面的代码片段。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    thead {
      display: table-header-group;
    }
    
    tfoot {
      display: table-footer-group;
    }
    
    table {
      border-collapse: collapse;
    }
    
    html,
    body,
    table,
    tr,
    td {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
    }
  </style>
</head>

<body>
  <table>
    <thead style="background:#fcc">
      <tr>
        <td>
          <div style="height: 231px">head</div>
        </td>
      </tr>
    </thead>
    <tbody style="background:#cfc">
      <tr>
        <td rowspan="2">
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </td>
        <td style="width: 0px"></td>
      </tr>
      <tr style="height: 0px"><td style="width: 0px"></td></tr>
      <tr>
        <td>widow</td>
      </tr>
    </tbody>
    <tfoot style="background:#ccf">
      <tr>
        <td>
          <div style="height:231px">foot</div>
        </td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

Table 在 chrome 中打印时，thead 和 tfoot 布局不正确

Table with thead and tfoot incorrect layout when printed in chrome

html

css

puppeteer