Heim >Web-Frontend >CSS-Tutorial >Wie kann ich benutzerdefinierte Kopf- und Fußzeilen konsistent auf jeder Seite eines Webberichts drucken?
Wie kann ich benutzerdefinierte Kopf- und Fußzeilen konsistent auf jeder Seite eines Webberichts drucken?
- Barbara StreisandOriginal
- 2024-10-25 11:42:02888Durchsuche
Kopf- und Fußzeilen von Webseiten auf jeder Seite drucken
Es bestand die Möglichkeit, benutzerdefinierte Kopf- und Fußzeilen auf jeder Seite eines gedruckten Webberichts zu drucken einst als unerreichbar galt. Allerdings haben die jüngsten Fortschritte bei den Browserfunktionen dies Wirklichkeit werden lassen, insbesondere im Fall von Mozilla Firefox und Internet Explorer.
Verwenden von Tabellen zur Seitengruppierung
Als Dank dieses effektiven Ansatzes ist es möglich, Tabellen in Kombination mit CSS-Styling zu verwenden, um das gewünschte Ergebnis zu erzielen. Durch die Implementierung der folgenden CSS-Stile:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
können Sie bestimmte Tabellenelemente als Kopf- oder Fußzeilen festlegen. Dadurch können sie auf jeder gedruckten Seite wiederholt werden.
Beispiel-HTML-Struktur
Um diese Technik zu implementieren, strukturieren Sie den HTML-Code wie folgt:
<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>
Umgang mit gedruckten Medien
Um sicherzustellen, dass diese Elemente nur in gedruckter Form angezeigt werden, verwenden Sie die @media-Regel:
<code class="css">@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}</code>
Dadurch wird die Anzeige von Kopf- und Fußzeile unterdrückt auf dem Bildschirm, während sie in gedruckten Dokumenten weiterhin präsent sind.
Hinweise zu Support und Browser
Ab 2015 bleibt diese Technik in Mozilla Firefox und Internet Explorer wirksam. Bei Webkit-basierten Browsern (z. B. Chrome, Safari) traten in diesem Bereich zuvor Probleme auf. Allerdings haben aktuelle Updates diese Probleme in Chrome gemildert. Weitere Informationen finden Sie in den unten bereitgestellten Fehlerberichten:
- [WebKit Bug 17205](https://bugs.webkit.org/show_bug.cgi?id=17205)
- [ Chromium-Problem 24826](https://code.google.com/p/chromium/issues/detail?id=24826)
- [Chromium-Problem 99124](https://code.google.com/p /chromium/issues/detail?id=99124)
Das obige ist der detaillierte Inhalt vonWie kann ich benutzerdefinierte Kopf- und Fußzeilen konsistent auf jeder Seite eines Webberichts drucken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!