印刷時に要素やテーブルの途中で改ページさせないスタイル

印刷時に要素やテーブルの途中で改ページさせないスタイル

テーブルで作成してある表などは、
印刷時に中途半端に改ページされると見づらくなりますので、
改ページさせないようにスタイル設定することが好ましいです。

page-break-inside: avoid; というスタイルを追加するだけです。

table {
   page-break-inside: avoid;
}

Case Study

これはテーブルだけでなく、見出し+本文などにも適用できます。
例えば、改ページさせたくないセクションを下記のように設定します。

 

見出し

 

本文テキスト本文テキスト本文テキスト本文テキスト

 

 

avoidというクラスのスタイルを下記のようにします。

.avoid {
   page-break-inside: avoid;
}



Cordingカテゴリの最新記事