大きな HTML テーブルを印刷するときに、改ページによってテーブルの行が分割されるのを防ぐにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

大きな HTML テーブルを印刷するときに、改ページによってテーブルの行が分割されるのを防ぐにはどうすればよいですか?

Barbara Streisand

Dec 17, 2024 pm 03:58 PM

How Can I Prevent Page Breaks from Splitting Table Rows When Printing Large HTML Tables?

大きな HTML テーブルの印刷での改ページの回避

Web 開発では、大きな HTML テーブルを印刷すると、改ページを管理するときに問題が発生する可能性があります。この問題は、表の行が複数のページに分割されている場合に発生し、読みやすさの問題につながります。

問題:

長い HTML 表を印刷する場合、不適切な位置で改ページが発生し、表データの連続性が中断されます。これは、行が 2 ページに分割され、行の一部が 1 ページの下部に表示され、残りの部分が次のページの上部に表示される場合に発生します。

解決策:

この問題を軽減するには、CSS プロパティの page-break-inside と page-break-after を次のようにすることができます。 used:

page-break-inside: 要素内の改ページを制御します。 auto に設定すると、要素内で改ページが許可され、表の行が分割されなくなります。
page-break-after: 現在の要素の後に改ページするかどうかを指定します。これを auto に設定すると、分割を防ぐためにテーブルの各行の後に改ページを許可します。

実装例:

次の HTML および CSS コードは、その方法を示しています。大きな HTML テーブルの印刷で改ページを避けるには:

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

ログイン後にコピー

これらの CSS プロパティを使用することで、 HTML テーブルは改ページを考慮するようになり、テーブルの行が複数のページに分割されることがなくなり、読みやすさが維持されます。

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

このウェブサイトの声明

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