Wie drucke ich benutzerdefinierte Kopf- und Fußzeilen in einem Webbericht, ohne JavaScript zu verwenden?

Benutzerdefinierte Kopf- und Fußzeilen auf jeder Seite drucken

Beim Erstellen webbasierter Berichte zum Drucken kann es wünschenswert sein, benutzerdefinierte Kopf- und Fußzeilen einzuschließen Fußzeilen auf jeder Seite. Allerdings ging man zunächst davon aus, dass diese Funktionalität im Browserfenster nicht möglich sei.

Trotz vorheriger Recherche ergab sich eine mögliche Lösung durch den Einsatz von Tabellen. Durch das Stylen der Tabellenelemente mit CSS können Kopf- und Fußzeile mithilfe der Tags thead bzw. tfoot positioniert werden.

<table style="display: table">
  <thead style="display: table-header-group">
    <tr><td>Your header goes here</td></tr>
  </thead>
  <tfoot style="display: table-footer-group">
    <tr><td>Your footer goes here</td></tr>
  </tfoot>
  <tbody>
    <!-- Report body -->
  </tbody>
</table>

Um sicherzustellen, dass Kopf- und Fußzeile nur auf gedruckten Medien sichtbar sind, werden CSS-Medienabfragen durchgeführt implementiert werden kann:

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

Anfangs wurde erwartet, dass diese Lösung nur in Firefox und Internet Explorer funktioniert. Durch aktuelle Updates wurde die Kompatibilität jedoch auf Chrome und Safari ausgeweitet.

Dieser tabellenbasierte Ansatz bietet einen praktikablen Workaround für das Drucken benutzerdefinierter Kopf- und Fußzeilen auf jeder Seite, selbst bei eingeschränkter CSS-Unterstützung in Internet Explorer 6.

Das obige ist der detaillierte Inhalt vonWie drucke ich benutzerdefinierte Kopf- und Fußzeilen in einem Webbericht, ohne JavaScript zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!