Il y a quelques semaines, je travaillais sur un template de bilan comptable, destiné a être imprimé via notre application IBAKUS®COMPTA, dans lequel l’en-tête de page devait se répéter sur chaque pages du document.

L’en-tête de page était constitué de plusieurs éléments permettant d’identifier le déposant (le nom de la société, son adresse, son numéro RC et TVA, etc.), la date d’impression, le titre du document, etc. Quelque chose dans ce style là :

<div class="document-head container">
  <div class="document-datas one-half">
    <h1>Titre du document</h1>
    <p>Édité le 16/06/2016</p>
    ...
  </div>
  <div class="declarer-datas one-half">
    <ul>
      <li>Numéro RC : 0123456789</li>
      <li>Numéro TVA : 0123456789</li>
    </ul>
    <p>Nom de la société</p>
    <p>1 Infinite Loop</p>
    ...
  </div>
</div>

Plusieurs tableaux de données comptable venaient ensuite peupler le document. Bien entendu, n’importe quel tableau pouvait s’étaler sur plusieurs pages. Il fallait donc pouvoir répéter les en-têtes des tableaux à chaque saut de page !

Répéter les en-têtes d’un tableau

Pour répéter les en-têtes d’un tableau sur toutes les pages imprimées qu’il occupera, c’est très simple. Attention les yeux : il suffit d’utiliser les balises <thead>, <th> et <tbody> dans la structure du tableau pour que la magie opère ! C’est tout !

<table>
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bla bla</td>
      <td>bla bla</td>
      <td>bla bla</td>
    </tr>
    ...
  </tbody>
</table>

Répéter l’en-tête de page

Lorsqu’on veut imprimer un en-tête personnalisé en plus de répéter les en-têtes des tableaux sur chaque pages HTML, c’est toujours un peu galère, il faut se débrouiller à grand coup de Javascript et de CSS pour arriver à ses fins. Mais, il y a plus simple ! Eh oui, un petit coup de <thead> !

<table>
  <thead>
    <tr>
      <th colspan="3">
        <div class="document-head container">
          <div class="document-datas one-half">
            <h1>Titre du document</h1>
            <p>Édité le 16/06/2016</p>
            ...
          </div>
          <div class="declarer-datas one-half">
            <ul>
              <li>Numéro RC : 0123456789</li>
              <li>Numéro TVA : 0123456789</li>
            </ul>
            <p>Nom de la société</p>
            <p>1 Infinite Loop</p>
            ...
          </div>
        </div>
      </th>
    </tr>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bla bla</td>
      <td>bla bla</td>
      <td>bla bla</td>
    </tr>
    ...
  </tbody>
</table>

Il est effectivement possible d’ajouter autant de lignes (<tr>) que l’on souhaite dans un <thead>. Cette solution fonctionne assez bien.

Attention !

Sauf si vous faites un float: left sur les <div>, et là tout fout le camp ! Votre en-tête s’affichera bien sur la première page, par contre les suivantes se verront décorées d’un bel espace vide en guise d’en-tête. Dommage ! 