css - 印刷時にdiv/tablesをカットしないでください

Question

編集可能な請求書テンプレートを使用して請求書を作成しています。ブラウザでは見栄えがしますが、テーブルに一定数のアイテムを追加すると、下の部分（画像に添付）がそのようにカットされます。これを修正するにはどうすればよいですか？アイテムが多い場合は自動的に2ページ目に印刷し、収まる場合は1ページ目に印刷してほしい。

ありがとう！

Answer 1

テーブルの場合は<thead>、、<tbody>および<tfoot>タグを使用する必要があります。必要に応じて実験する必要があり<tfoot>ます。残りの 2 つは非常に便利です。表の見出しはすべてのページで繰り返されるため、表があまりカットされていないように見えます。<tfoot>は、すべてのページのフッターとして定義したものもコピーしますが、これは望ましくない場合があります。

divについては、page-break-beforeまたはpage-break-after CSSコマンドを試す必要があります。div を埋めるページがある場合、これらは役に立ちませんが、小さなものでは役立つかもしれません。

Answer 2

div にこの CSS スタイルを追加してみてください。

page-break-inside: avoid;