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

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

大きな HTML テーブルを印刷するときの改ページの処理: CSS アプローチ

大規模な HTML テーブルを印刷する場合、行の連続性を妨げる改ページが発生する可能性があります。イライラする。この問題に対処するには、CSS の改ページプロパティの使用を検討してください。

に page-break-inside:auto を指定することで、要素を使用すると、ブラウザは改ページを開始する前に現在のページの表を完成させようとします。さらに、に page-break-inside:avoid を設定します。要素により、行がページ間で分割されるのを防ぎます。

ヘッダーとフッターの表示を維持するには、

で page-break-after:auto を使用します。ルール。これにより、改ページが発生する前に現在の行が完了し、ヘッダーまたはフッター情報の分離が防止されます。

次のコードは、このアプローチを示しています。

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

ソース：php.cn

前の記事：CSS `calc()` 関数内で Sass 変数を正しく使用するにはどうすればよいですか? 次の記事：Flexbox の代わりに CSS 配置を使用してテキストを画像の中央に配置するにはどうすればよいですか?

このウェブサイトの声明

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

著者別の最新記事