ホームページ > 記事 > ウェブフロントエンド > ## 表を使用すると、印刷ページでヘッダーとフッターを繰り返すという課題を解決できますか?

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

Linda Hamiltonオリジナル: 2024-10-26 04:08:27730ブラウズ

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

firefox css chrome html for while this table issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：アンカータグを引き伸ばしてリストアイテムのスペース全体を埋めるにはどうすればよいですか?次の記事：アンカータグを引き伸ばしてリストアイテムのスペース全体を埋めるにはどうすればよいですか?

続きを見る