用thead和tfoot的布局打印在镀铬时

我正在使用Linux Alpine上的PDF生成Puppeteer。我使用 thead tbody tfoot技巧在每个页面上获取适当的标头和页脚。

我注意到铬和铬在打印时的布局如何布局。也就是说，在渲染表时跳过第一页。

这是一个repro(在Ubuntu 18.04上测试了Chrome 73.0.3683.75，可能很重要，因为此repro很难重新创建，并且字体渲染可能会影响布局(。

(。

<!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时，表开始在文档的第二页https://i.stack.imgur.com/6m88a.png上渲染。我希望它从第一页开始。是否有CSS规则，例如page-break-inside: do-it-please-instead-of-messing-up-my-table？

编辑：忘记设置，使用Margins None重复问题https://i.stack.imgur.com/jkwng.png

另外，一个切向问题：删除第二个表行<tr><td>widow</td></tr>显示了另一个意外的渲染伪像：https：//i.stack.imgur.com/dvp4h.png。在这里，tbody开始在第一页上渲染，但将tfoot推到第二页。我也希望tbody在这种情况下也打破。

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

更新 - 现在被标记为固定(虽然没有测试(：https://bugs.chromium.org/p/chromium/issues/detail?id=962435#c24

不幸的是(但也许毫不奇怪(这并不是真正的优先事项。我最终将Puppeteer交换为OpenHTMLTOPDF，它处理运行的标题和页脚更好。

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

我们遇到了同样的问题。有一个不错的解决方案。一旦您创建一个用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>

相关内容

最新更新

热门标签：