Comment CSS peut-il empêcher les sauts de ligne lors de l'impression de grands tableaux HTML ?-tutoriel CSS-php.cn

How Can CSS Prevent Row Breaks When Printing Large HTML Tables?

Gestion des sauts de page lors de l'impression de grands tableaux HTML : approche CSS

Lors de l'impression d'un tableau HTML volumineux, des sauts de page qui perturbent la continuité des lignes peuvent être frustrant. Pour résoudre ce problème, envisagez d'utiliser les propriétés de saut de page CSS.

En spécifiant page-break-inside:auto pour le

élément, le navigateur tente de compléter le tableau sur la page actuelle avant de lancer un saut de page. De plus, la définition de page-break-inside:avoid pour le elements empêche la répartition des lignes sur les pages.

Pour préserver la visibilité de l'en-tête et du pied de page, utilisez page-break-after:auto dans le fichier

règles. Cela garantit que la ligne actuelle est terminée avant qu'un saut de page ne se produise, empêchant ainsi la séparation des informations d'en-tête ou de pied de page.

Le code suivant illustre cette approche :

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Copier après la connexion

En appliquant ces règles CSS , vous pouvez contrôler efficacement les sauts de page, en garantissant que les lignes sont imprimées dans leur intégralité tout en préservant l'intégrité des en-têtes et des pieds de page.

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

Article précédent：Comment puis-je utiliser avec succès les variables Sass dans la fonction CSS `calc()` ? Article suivant：Comment puis-je centrer le texte sur une image en utilisant le positionnement CSS au lieu de Flexbox ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2244

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2384

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1992

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...