ホームページ >ウェブフロントエンド >CSSチュートリアル >大きな HTML テーブルを印刷するときに、改ページによってテーブルの行が分割されるのを防ぐにはどうすればよいですか?
大きな HTML テーブルを印刷するときに、改ページによってテーブルの行が分割されるのを防ぐにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-12-17 15:58:10558ブラウズ
大きな 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 までご連絡ください。