ホームページ >ウェブフロントエンド >CSSチュートリアル >Web レポートのすべてのページでカスタム ヘッダーとフッターを一貫して印刷するにはどうすればよいですか?
Web レポートのすべてのページでカスタム ヘッダーとフッターを一貫して印刷するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-10-25 11:42:02888ブラウズ
Web ページのヘッダーとフッターをすべてのページに印刷する
印刷された Web レポートのすべてのページにカスタム ヘッダーとフッターを印刷できるようになりました。かつては達成不可能だと信じられていました。しかし、最近のブラウザ機能の進歩により、特に Mozilla Firefox と Internet Explorer の場合、これが現実になりました。
テーブルを使用してページ グループ化を実現
効果的なアプローチでは、テーブルを CSS スタイルと組み合わせて利用して、目的の結果を達成することができます。次の CSS スタイルを実装することで:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
特定のテーブル要素をヘッダーまたはフッターとして指定できます。これにより、各印刷ページでこれらを繰り返すことができます。
HTML 構造の例
この手法を実装するには、HTML を次のように構造化します。
<code class="html"><body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body></code>
印刷メディアの処理
これらの要素が印刷でのみ表示されるようにするには、@media ルールを利用します。
<code class="css">@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}</code>
これにより、ヘッダーとフッターの表示が抑制されます。
サポートとブラウザに関する考慮事項
2015 年現在、この手法は Mozilla Firefox と Internet Explorer で引き続き有効です。 Webkit ベースのブラウザ (Chrome、Safari など) では、以前にこの領域で問題が発生しました。ただし、最近のアップデートにより、Chrome でのこれらの問題は軽減されました。詳細については、以下のバグ レポートを参照してください:
- [WebKit Bug 17205](https://bugs.webkit.org/show_bug.cgi?id=17205)
- [ Chromium 問題 24826](https://code.google.com/p/chromium/issues/detail?id=24826)
- [Chromium 問題 99124](https://code.google.com/p /chromium/issues/detail?id=99124)
以上がWeb レポートのすべてのページでカスタム ヘッダーとフッターを一貫して印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。