テーブルを使用して、ブラウザ全体で Web ページのカスタムヘッダーとフッターを印刷するにはどうすればよいですか?-CSSチュートリアル-php.cn

テーブルを使用して、ブラウザ全体で Web ページのカスタムヘッダーとフッターを印刷するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-10-26 02:42:02

オリジナル

270 人が閲覧しました

How can I use Tables to Print Custom Headers and Footers in Web Pages Across Browsers?

テーブルを使用して Web ページにカスタムヘッダーとフッターを印刷する

Web 開発では、すべてのページにカスタムヘッダーとフッターを印刷することができます。特にブラウザ間の互換性を考慮すると、困難な作業です。歴史的には、これは実現不可能だと考えられていましたが、最近の進歩により実行可能な解決策が提供されています。

CSS を通じてこれを実現するために、ユーザーは thead および tfoot HTML 要素を採用し、適切な CSS スタイルを適用しました。これらの要素は、

<code class="css">thead { display: table-header-group; }
tfoot { display: table-footer-group; }</code>

ログイン後にコピー

のような CSS 定義と組み合わせると、目的の動作を有効にします。 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>

ログイン後にコピー

このアプローチは、すべての印刷ページにヘッダーとフッターを効果的に表示します。

ただし、この手法はすべてのシナリオに最適であるわけではないことに注意することが重要です。。たとえば、ヘッダーまたはフッターのサイズが動的に変化する場合、理想的な改ページ位置を計算するのが困難になることがあります。さらに、このアプローチは、テーブルベースのアプローチよりも CSS ベースのレイアウトを優先する現在の Web デザインのベストプラクティスとうまく調和しない可能性があります。

互換性をさらに強化するために、@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>

ログイン後にコピー

この変更により、ヘッダーとフッターは画面上では非表示になりますが、ページの印刷時には表示されるようになります。

注目に値します。 Chrome などの一部のブラウザでは、印刷媒体のテーブルヘッダーとフッターのサポートが実装されています。ただし、Internet Explorer 6 などのレガシーブラウザはこのアプローチを完全にはサポートしていない可能性があるため、代替ソリューションが必要です。

以上がテーブルを使用して、ブラウザ全体で Web ページのカスタムヘッダーとフッターを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。