Heim >Web-Frontend >CSS-Tutorial >## Können Tabellen die Herausforderung sich wiederholender Kopf- und Fußzeilen auf gedruckten Seiten lösen?
## Können Tabellen die Herausforderung sich wiederholender Kopf- und Fußzeilen auf gedruckten Seiten lösen?
- Linda HamiltonOriginal
- 2024-10-26 04:08:27823Durchsuche
Wiederholung von Kopf- und Fußzeilen auf mehreren gedruckten Seiten erreichen
Einführung:
Beibehaltung der Konsistenz von Kopf- und Fußzeilen auf gedruckten Dokumenten von Webseiten kann eine verwirrende Herausforderung sein. Trotz umfangreicher Forschung sind viele Lösungen noch immer schwer zu finden. Dieser Artikel versucht jedoch, dieses Problem zu klären und zu lösen.
Können Kopf- und Fußzeilen auf jeder Seite gedruckt werden?
Basierend auf Ihrer Anfrage stellt sich die Frage: Ist Ist es möglich, benutzerdefinierte Kopf- und Fußzeilen auf mehreren gedruckten Seiten zu wiederholen? Auch wenn Sie Ihre Skepsis geäußert haben, ist es angebracht, das Potenzial solcher Lösungen zu erkunden.
Annäherung an das Problem:
Sie sind genau zu dem Schluss gekommen, dass CSS-Medientypen dies möglicherweise nicht tun das Haupthindernis in diesem Szenario. Stattdessen haben Sie die Möglichkeit der Verwendung von Tabellen und Tabellenkopf-Tags untersucht. Lassen Sie uns jedoch tiefer auf diesen Ansatz eingehen.
Lösung:
Die Verwendung von Tabellen erweist sich hier trotz ihrer wahrgenommenen Nachteile bei der Layoutgestaltung als wirksame Lösung Fall. Durch die Einstellung der folgenden CSS-Stile können Sie die gewünschte Wiederholung erreichen:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
Anschließend achten Sie beim Rendern Ihres HTML darauf, den Textkörper wie folgt zu strukturieren:
<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>
Um dies sicherzustellen Kopf- und Fußzeile werden nur beim Drucken angezeigt. Verwenden Sie die folgenden @media-Parameter:
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}
Browserkompatibilität:
Diese Methode funktionierte ursprünglich in Firefox und IE. Allerdings wurde das Problem inzwischen auch in Chrome behoben. Daher können die oben genannten Fehler in Chrome Issue Trackern als veraltet angesehen werden.
Das obige ist der detaillierte Inhalt von## Können Tabellen die Herausforderung sich wiederholender Kopf- und Fußzeilen auf gedruckten Seiten lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!