大きな HTML テーブルを印刷するときに行の区切りを防ぐにはどうすればよいですか?-CSSチュートリアル-php.cn

大きな HTML テーブルを印刷するときに行の区切りを防ぐにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-26 03:46:09

オリジナル

370 人が閲覧しました

How Can I Prevent Row Breaks When Printing Large HTML Tables?

HTML テーブル印刷での改ページの管理

大規模な HTML テーブルを印刷する場合、見苦しい行の切り取りを避けるために改ページを管理することが重要です。元の質問では、テーブルの代わりにスタックされた DIV を利用し、必要な改ページを強制するという 1 つの一般的なアプローチが提案されています。ただし、このような重要な変更に着手する前に、テーブルの使用を維持する代替ソリューションを検討してみましょう。

改ページを効果的に管理するための鍵は、CSS プロパティにあります。次の 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 }

ログイン後にコピー

テーブルの page-break-inside プロパティは、テーブル内で改ページが発生できることを指定します。行の page-break-inside プロパティにより、行が複数のページに分割されないことが保証され、page-break-after プロパティにより、行の直後の改ページが防止されます。最後に、テーブルのヘッダー要素とフッター要素の表示プロパティによって、印刷目的でテーブルに関連付けられるようになります。

以下は、これらの 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 テーブルを印刷するときに行の区切りを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。