Besoin d'aide pour ajouter des en-têtes et des pieds de page sur chaque page lorsque j'imprime un long tableau HTML

Question

J'ai une vue avec un long tableau HTML. Lorsque j'essaie d'imprimer la vue, le tableau est divisé en pages. Évidemment, le formulaire se rompt et passe à la page suivante et ainsi de suite. Je veux pouvoir ajouter proprement des en-têtes et des pieds de page sur chaque page imprimée.

J'ai essayé d'utiliser les propriétés de saut de page CSS telles que :

Saut de page interne Après la pagination Avant la pagination <​​/p>

J'ai essayé de fixer l'en-tête et le pied de page en haut et en bas en utilisant position:fixed. Même si le pied de page apparaît sur chaque page, il chevauche le tableau. Comme vous pouvez le voir dans la zone en surbrillance :

Je souhaite donc afficher l'en-tête et le pied de page sans aucun chevauchement.

C'est ainsi que la table s'est cassée^^

Je souhaite que l'en-tête et le pied de page apparaissent sur chaque page. J'ai essayé d'ajouter un en-tête et un pied de page dans les balises thead et tfoot mais cela ne fonctionne pas.

J'ai essayé d'utiliser les propriétés de saut de page CSS telles que :

Saut de page interne Après la pagination Avant la pagination <​​/p>

J'ai essayé de fixer l'en-tête et le pied de page en haut et en bas en utilisant position:fixed. Même si le pied de page apparaît sur chaque page, il chevauche le tableau. Comme vous pouvez le voir dans la zone en surbrillance :

Answer 1

Voici le code qui a résolu mon problème :

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