Я использую Puppeteer для генерации PDF на Linux Alpine.Я использую трюк thead
tbody
tfoot
, чтобы получить правильные верхние и нижние колонтитулы на каждой странице.
Я заметил странное поведение с тем, как хром и хром размещаются при печати.А именно, пропуская первую страницу при рендеринге таблицы.
Вот репродукция (протестированная для Chrome 73.0.3683.75 в Ubuntu 18.04, может быть важна, так как это репродукция была довольно сложной для воссоздания, а рендеринг шрифтов мог повлиять на макет).
<!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
сломался и в этом случае.