ホームページ >ウェブフロントエンド >CSSチュートリアル >印刷時に HTML テーブルの行がページ全体に分割されないようにするにはどうすればよいですか?
印刷時に HTML テーブルの行がページ全体に分割されないようにするにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-12-14 22:56:14433ブラウズ
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 スタイル:
<!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 ルールを実装すると、それ:
- 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 までご連絡ください。