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

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

Patricia Arquette
Libérer: 2024-12-07 15:35:15
original
860 Les gens l'ont consulté

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

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

Question :

Le CSS peut-il être utilisé pour assurez-vous que les en-têtes de tableau (th) sont répétés sur chaque page imprimée lorsqu'un tableau s'étend sur plusieurs pages ?

Réponse :

Oui, cela est possible en utilisant l'élément THEAD.

Explication :

L'élément THEAD est spécialement conçu à cet effet. Lorsqu'il est utilisé avec la propriété @page, il vous permet de répéter les en-têtes du tableau sur chaque page d'un document imprimé, même si le tableau s'étend au-delà d'une seule page.

Code CSS :

Pour répéter les en-têtes de tableau à l'aide de l'élément THEAD, suivez ces étapes :

  1. Créez un élément THEAD distinct pour contenir vos en-têtes de tableau. (th).
  2. Enroulez l'élément THEAD autour des lignes d'ouverture et de fermeture de l'en-tête de votre tableau.
  3. Dans votre CSS, ajoutez le code suivant à l'intérieur de la propriété @page :
@page {
  @top-left {
    content: element(thead);
  }
}
Copier après la connexion

Ce code indiquera au navigateur de répéter automatiquement l'élément THEEAD sur chaque page lorsque le tableau est imprimé.

Référence :

Pour plus d'informations sur l'élément THEAD et son utilisation en mode impression, reportez-vous à la documentation officielle suivante :

[ Élément CSS THEAD](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)

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!

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