印刷文書の各ページにヘッダーを追加したい。
使用page-break-inside: avoid
、コンテンツの一部が次のページに移動するかのように、完全に次のページに移動する必要があります。
この問題は、コンテンツ自体が 1 ページを超える場合に発生します。テーブル構造は
<table class="super-table">
<thead class="pageheader">
<tr>
<td>
<?php echo $header; ?>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php echo $content[0]; ?>
</td>
</tr>
<tr>
<td>
<?php echo $content[1]; ?>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<?php echo $footer; ?>
</td>
</tr>
</tfoot>
</table>
CSS
@media print {
thead {
display: table-header-group; position: running(pageheader);
}
tr, td {
page-break-inside: avoid;
}
@page {
size: letter portrait;
@top-left { content: element(pageheader); }
}
.super-table {
page-break-after: always;
}
}
コンテンツが 1 ページを超えると、ヘッダーが重なります。ヘッダーではなく、各ページのコンテンツのみに余白を設定できますか? margin-top を追加すると@page
、ヘッダーも下にシフトします。