Maison >interface Web >tutoriel CSS >Comment puis-je obtenir une impression cohérente des en-têtes et pieds de page personnalisés sur chaque page d'un rapport Web ?
Comment puis-je obtenir une impression cohérente des en-têtes et pieds de page personnalisés sur chaque page d'un rapport Web ?
- Barbara Streisandoriginal
- 2024-10-25 11:42:02888parcourir
Impression des en-têtes et des pieds de page de pages Web sur chaque page
La possibilité d'imprimer des en-têtes et des pieds de page personnalisés sur chaque page d'un rapport Web imprimé a été autrefois considéré comme inaccessible. Cependant, les progrès récents dans les capacités des navigateurs ont fait de cela une réalité, en particulier dans le cas de Mozilla Firefox et Internet Explorer.
Utiliser des tableaux pour réaliser un regroupement de pages
En tant que approche efficace, il est possible d'utiliser des tableaux en combinaison avec le style CSS pour obtenir le résultat souhaité. En implémentant les styles CSS suivants :
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
vous pouvez désigner des éléments de tableau spécifiques comme en-têtes ou pieds de page. Cela permet de les répéter sur chaque page imprimée.
Exemple de structure HTML
Pour mettre en œuvre cette technique, structurez le HTML comme suit :
<code class="html"><body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body></code>
Gestion des médias imprimés
Pour garantir que ces éléments ne sont affichés que sous forme imprimée, utilisez la règle @media :
<code class="css">@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}</code>
Cela supprimera l'affichage de l'en-tête et du pied de page. à l'écran tout en conservant leur présence dans les documents imprimés.
Considérations relatives au support et au navigateur
Depuis 2015, cette technique reste efficace dans Mozilla Firefox et Internet Explorer. Les navigateurs basés sur Webkit (par exemple Chrome, Safari) ont déjà rencontré des problèmes dans ce domaine. Cependant, des mises à jour récentes ont atténué ces problèmes dans Chrome. Consultez les rapports de bugs fournis ci-dessous pour plus d'informations :
- [WebKit Bug 17205](https://bugs.webkit.org/show_bug.cgi?id=17205)
- [ Chromium Numéro 24826](https://code.google.com/p/chromium/issues/detail?id=24826)
- [Chromium Numéro 99124](https://code.google.com/p /chromium/issues/detail?id=99124)
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!