印刷時に各ページで表のヘッダーを繰り返すにはどうすればよいですか?

印刷モードでの表のヘッダーの繰り返し

印刷中に表が複数のページにまたがる場合、ヘッダー行 (TH 要素) を含めることが望ましいことがよくあります。 ) 簡単に参照できるように、各ページで繰り返されています。 CSS は、これを実現するメカニズムを提供します。

解決策: THEAD 要素の使用

CSS の THEAD 要素は、この目的のために特別に設計されています。これにより、印刷されるすべてのページで繰り返される一連のヘッダー行を定義できます。使用方法は次のとおりです:

1. テーブル ヘッダーを THEAD 要素でラップします:

   <table>
   <thead>
      <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
   </thead>
   <tbody>
      <!-- Table data goes here -->
   </tbody>
   </table>

   ログイン後にコピー

2. 次のスタイルを @page に追加しますルール:

   @page {
     margin: 1cm;
     @top-left {
       content: element(thead);
     }
   }

   ログイン後にコピー

説明:

• thead 要素はヘッダー行のコンテナとして機能します。
• @page ルールはページの余白を設定し、content プロパティを持つ @top-left サブルールを含みます。 element(thead) に設定します。
• この設定は、ブラウザに、印刷されるすべてのページの左上隅に THEAD 要素のコンテンツを表示し、表のヘッダーを効果的に繰り返すように指示します。

THEAD 要素を利用すると、表のヘッダーが各印刷ページに一貫して表示され、読者に明確で便利な参照を提供できます。

以上が印刷時に各ページで表のヘッダーを繰り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。