Currently, I am utilizing puppeteer for generating PDFs on a Linux Alpine system. To achieve proper headers and footers on each page, I am employing the thead, tbody, tfoot trick.
An anomaly caught my attention in how Chrome and Chromium handle layout while printing - specifically, skipping the initial page when rendering a table.
To reproduce this issue (tested with Chrome 73.0.3683.75 on Ubuntu 18.04), font-rendering may play a role in affecting the layout.
<!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>
...
content section truncated for brevity
...
</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>Upon loading this page and initiating print using ctrl+p, the table starts rendering from the second page of the document as shown here: https://i.sstatic.net/6M88A.png. The expected behavior would be to initiate rendering on the first page. Is there a CSS rule or workaround like
page-break-inside: do-it-please-instead-of-messing-up-my-tableEdit: I overlooked mentioning a setting - use Margins None to replicate the issue demonstrated here: https://i.sstatic.net/JKWNg.png
Moreover, an incidental concern arises: By removing the second table row,
<tr><td>widow</td></tr>tbody initiates rendering on the first page but displaces the tfoot to the subsequent page. Ideally, I would like the tbody to break appropriately in such scenarios as well.