Ich brauche Hilfe beim Hinzufügen von Kopf- und Fußzeilen auf jeder Seite, wenn ich eine lange HTML-Tabelle drucke

Question

Ich habe eine Ansicht mit einer langen HTML-Tabelle. Wenn ich versuche, die Ansicht zu drucken, wird die Tabelle in Seiten aufgeteilt. Offensichtlich bricht das Formular ab und fährt mit der nächsten Seite fort und so weiter. Ich möchte in der Lage sein, auf jeder gedruckten Seite Kopf- und Fußzeilen sauber hinzuzufügen.

Ich habe versucht, CSS-Seitenumbrucheigenschaften zu verwenden wie:

Interner Seitenumbruch Nach dem Paging Vor der Paginierung <​​/p>

Ich habe versucht, die Kopf- und Fußzeile mit position:fixed oben und unten zu fixieren. Obwohl die Fußzeile auf jeder Seite erscheint, überlappt sie die Tabelle. Wie Sie im hervorgehobenen Bereich sehen können:

Ich möchte also Kopf- und Fußzeile ohne Überlappung anzeigen.

So ist der Tisch kaputt gegangen^^

Ich möchte, dass Kopf- und Fußzeile auf jeder Seite angezeigt werden. Ich habe versucht, Kopf- und Fußzeilen in die Tags „head“ und „tfoot“ einzufügen, aber das funktioniert nicht.

Ich habe versucht, CSS-Seitenumbrucheigenschaften zu verwenden wie:

Interner Seitenumbruch Nach dem Paging Vor der Paginierung <​​/p>

Ich habe versucht, die Kopf- und Fußzeile mit position:fixed oben und unten zu fixieren. Obwohl die Fußzeile auf jeder Seite erscheint, überlappt sie die Tabelle. Wie Sie im hervorgehobenen Bereich sehen können:

Answer 1

这是解决我的问题的代码：

HTML

<table>
  <thead><tr><td>
    <div class="header-space">&nbsp;</div>
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">...</div>
  </td></tr></tbody>
  <tfoot><tr><td>
    <div class="footer-space">&nbsp;</div>
  </td></tr></tfoot>
</table>
<div class="header">...</div>
<div class="footer">...</div>

CSS

.header, .header-space,
.footer, .footer-space {
  height: 100px;
}
.header {
  position: fixed;
  top: 0;
}
.footer {
  position: fixed;
  bottom: 0;
}