Pourquoi ne puis-je pas imprimer les numéros de page en HTML et quelle est la solution de contournement ?

Impossible d'imprimer les numéros de page sur les pages HTML ?

Description du problème :

Malgré des recherches approfondies, les numéros de page échouent à apparaître lors de l'impression d'un document HTML.

Code CSS Utilisé :

@page {
  margin: 10%;
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

La règle @page a été tentée à la fois à l'intérieur et à l'extérieur du bloc @media all en vain.

Solution :

En raison des limitations des navigateurs Web, l'implémentation des numéros de page à l'aide de @page n'est pas réalisable. Une solution alternative est proposée par Oliver Kohll, qui utilise un formatage basé sur des tableaux en CSS sans s'appuyer sur @page :

CSS :

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML :

<div>

Personnalisation :

L'apparence des numéros de page peut être personnalisée en modifiant les propriétés de #pageFooter, telles que comme le formatage du texte, le positionnement et le style d'arrière-plan.

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!