印刷時に HTML テーブルの行がページ全体に分割されないようにするにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

印刷時に HTML テーブルの行がページ全体に分割されないようにするにはどうすればよいですか?

Dec 14, 2024 pm 10:56 PM

How Can I Prevent HTML Table Rows from Splitting Across Pages When Printing?

HTML テーブル印刷での改ページへの対処

広範囲の HTML テーブルを印刷する場合、読みやすさを維持するには改ページを管理することが重要です。行がページ間で分割されないようにするには、次の解決策を検討してください:

CSS スタイルを使用して HTML テーブルの改ページを制御できます:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

ログイン後にコピー

これらを使用した HTML テーブルの例を次に示します。適用される CSS スタイル:

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;&lt;th&gt;heading&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tfoot&gt;
            &lt;tr&gt;&lt;td&gt;notes&lt;/td&gt;&lt;/tr&gt;
        &lt;/tfoot&gt;
        &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;x&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;x&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- 500 more rows --&gt;
        &lt;tr&gt;
            &lt;td&gt;x&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

これらの CSS ルールを実装すると、それ:

tr 要素の page-break-inside:avoid は、ページ内での改行を防ぎます。
page-break-after:auto tr 要素では、各要素の後に改ページできます。 thead 要素と tfoot 要素の
display:table-header-group と display:table-footer-group がテーブルを保持します。ヘッダーとフッターはそれぞれのページにあります。

以上が印刷時に HTML テーブルの行がページ全体に分割されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。