Wie kann ich beim Drucken Tabellenüberschriften auf jeder Seite wiederholen?

Wiederholende Tabellenüberschriften im Druckmodus

Wenn sich eine Tabelle beim Drucken über mehrere Seiten erstreckt, ist es oft wünschenswert, die Kopfzeilen (TH-Elemente) zu haben ) werden zur leichteren Bezugnahme auf jeder Seite wiederholt. CSS bietet einen Mechanismus, um dies zu erreichen.

Lösung: Verwendung des THEAD-Elements

Das THEAD-Element in CSS wurde speziell für diesen Zweck entwickelt. Sie können damit eine Reihe von Kopfzeilen definieren, die auf jeder gedruckten Seite wiederholt werden sollen. So verwenden Sie es:

1. Umschließen Sie die Tabellenüberschriften in ein THEAD-Element:

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

   Nach dem Login kopieren

2. Fügen Sie Ihrer @page den folgenden Stil hinzu Regel:

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

   Nach dem Login kopieren

Erklärung:

• Das thead-Element dient als Container für die Kopfzeilen.
• Die @page-Regel legt die Seitenränder fest und enthält eine @oben-links-Unterregel, deren Inhaltseigenschaft auf festgelegt ist element(thead).
• Diese Konfiguration weist den Browser an, den Inhalt des THEAD-Elements in der oberen linken Ecke jeder gedruckten Seite darzustellen, wodurch die Tabellenüberschriften effektiv wiederholt werden.

Durch die Verwendung des THEAD-Elements können Sie sicherstellen, dass Ihre Tabellenüberschriften auf jeder gedruckten Seite konsistent angezeigt werden und Ihren Lesern eine klare und praktische Referenz bieten.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Drucken Tabellenüberschriften auf jeder Seite wiederholen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!