Web レポートのすべてのページでカスタムヘッダーとフッターを一貫して印刷するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-25 11:42:02

オリジナル

870 人が閲覧しました

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 でのこれらの問題は軽減されました。詳細については、以下のバグレポートを参照してください: