Wie kann ich benutzerdefinierte Kopf- und Fußzeilen konsistent auf jeder Seite eines Webberichts drucken?-CSS-Tutorial-php.cn

Wie kann ich benutzerdefinierte Kopf- und Fußzeilen konsistent auf jeder Seite eines Webberichts drucken?

Barbara Streisand

Freigeben： 2024-10-25 11:42:02

Original

834 Leute haben es durchsucht

How can I achieve consistent printing of custom headers and footers on every page of a web report?

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; }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!