Maison > interface Web > tutoriel CSS > Comment puis-je répéter les en-têtes de tableau sur chaque page lors de l'impression ?

Comment puis-je répéter les en-têtes de tableau sur chaque page lors de l'impression ?

Mary-Kate Olsen
Libérer: 2024-12-02 03:03:09
original
850 Les gens l'ont consulté

How Can I Repeat Table Headers on Each Page When Printing?

Répétition des en-têtes de tableau en mode impression

Lorsqu'un tableau s'étend sur plusieurs pages lors de l'impression, il est souvent souhaitable que les lignes d'en-tête (éléments TH ) répété sur chaque page pour faciliter la consultation. CSS fournit un mécanisme pour y parvenir.

Solution : Utilisation de l'élément THEAD

L'élément THEAD en CSS est conçu spécifiquement à cet effet. Il vous permet de définir un ensemble de lignes d'en-tête qui doivent être répétées sur chaque page imprimée. Voici comment l'utiliser :

  1. Enveloppez les en-têtes du tableau dans un élément THEAD :

    <table>
    <thead>
       <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tbody>
       <!-- Table data goes here -->
    </tbody>
    </table>
    Copier après la connexion
  2. Ajoutez le style suivant à votre @page règle :

    @page {
      margin: 1cm;
      @top-left {
        content: element(thead);
      }
    }
    Copier après la connexion

Explication :

  • L'élément head sert de conteneur pour les lignes d'en-tête.
  • La règle @page définit les marges de la page et inclut une sous-règle @top-left avec la propriété de contenu définie sur element(thead).
  • Cette configuration demande au navigateur d'afficher le contenu de l'élément THEAD dans le coin supérieur gauche de chaque page imprimée, répétant ainsi les en-têtes du tableau.

En utilisant l'élément THEAD, vous pouvez vous assurer que les en-têtes de votre tableau sont affichés de manière cohérente sur chaque page imprimée, fournissant ainsi une référence claire et pratique à vos lecteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal