## 表を使用すると、印刷ページでヘッダーとフッターを繰り返すという課題を解決できますか?-CSSチュートリアル-php.cn

## 表を使用すると、印刷ページでヘッダーとフッターを繰り返すという課題を解決できますか?

Linda Hamilton

リリース： 2024-10-26 04:08:27

オリジナル

874 人が閲覧しました

## Can Tables Solve the Challenge of Repeating Headers and Footers on Printed Pages?

複数の印刷ページでヘッダーとフッターの繰り返しを実現する

概要:

生成された印刷ドキュメントのヘッダーとフッターの一貫性を維持するWeb ページからのアクセスは、複雑な課題になる可能性があります。広範な研究にもかかわらず、多くの解決策は依然として見つかりません。ただし、この記事では、この問題を明確にして解決することを目的としています。

ヘッダーとフッターはすべてのページに印刷できますか?

クエリに基づいて、次のような疑問が生じます。カスタムのヘッダーとフッターを複数の印刷ページで繰り返すことは可能ですか?あなたは懐疑論を表明しましたが、そのような解決策の可能性を探ることは重要です。

問題へのアプローチ:

CSS メディアタイプは正しくない可能性があると正確に結論付けています。このシナリオにおける主な障害。代わりに、テーブルとテーブルヘッドタグを使用する可能性を調査しました。ただし、このアプローチをさらに詳しく見てみましょう。

解決策:

テーブルの使用は、レイアウト設計において認識されている欠点にもかかわらず、この問題では効果的な解決策であることが証明されています。場合。次の CSS スタイルを設定すると、目的の繰り返しを実現できます:

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

ログイン後にコピー

その後、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>

ログイン後にコピー

ヘッダーとフッターは印刷時にのみ表示されます。次の @media パラメータを使用します:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

ログイン後にコピー

ブラウザ互換性:

このメソッドは、当初 Firefox と IE で機能していました。ただし、現在では Chrome でも解決されています。したがって、Chrome 問題トラッカーの前述のバグは廃止されたものとみなされる可能性があります。

以上が## 表を使用すると、印刷ページでヘッダーとフッターを繰り返すという課題を解決できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。