EatSmartシステム部ブログ

ウェブサイトの開発や運営に関する情報です。

印刷用CSSでの改ページ指定

弊社サービスの管理機能で、お客様向けのレポートをPDF出力する機能があるのですが、レポートの内容をHTMLで組み立て、CSSで印刷用のレイアウトを指定して出力をしています。

基本的にはtableタグで表を組み立てているのですが、PDFで出力した際に表の項目単位でページを跨がないようするために、以下のstyleを指定して改ページされないようにしました。

tr {
    page-break-inside: avoid;
}

また、このレポートは1件ずつtableを組んだものが複数件あるのですが、tableごとに新しいページから開始するように、以下のstyle指定でtableごとの改ページを行いました。

table {
    page-break-before: always;
}

参考になれば!