简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  Web レポートのすべてのページでカスタム ヘッダーとフッターを一貫して印刷するにはどうすればよいですか?

Web レポートのすべてのページでカスタム ヘッダーとフッターを一貫して印刷するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-25 11:42:02765ブラウズ

How can I achieve consistent printing of custom headers and footers on every page of a web report?

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 サイトの他の関連記事を参照してください。

firefox css chrome safari html webkit print for while CGI using this display table https bug issue
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQuery を使用して、ボタンのクリックで Web ページ上の特定のセクションまたはターゲットにスムーズにスクロールするにはどうすればよいですか?次の記事：jQuery を使用して、ボタンのクリックで Web ページ上の特定のセクションまたはターゲットにスムーズにスクロールするにはどうすればよいですか?

関連記事

続きを見る