我在 linux alpine 上使用 puppeteer 生成 pdf。我用 thead tbody tfoot在每个页面上获得正确的页眉和页脚的技巧。
我注意到 chrome 和 chromium 在打印时的布局方式有些奇怪。即，在呈现表格时跳过第一页。
这是一个重现(在 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 时，表格开始呈现在文档的第二页上 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
另外，一个切线问题:
删除第二个表格行，<tr><td>widow</td></tr> ，显示另一个意外的渲染工件:https://i.imgur.com/lLpa4yH.png .在这里，tbody开始在第一页上呈现但推送 tfoot到第二页。我想要 tbody在这种情况下也会中断。
最佳答案
为此向 chromium 团队报告了一个错误: 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
关于html - 用 chrome 打印时，带有 thead 和 tfoot 的表格布局不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56108198/