Maison >interface Web >tutoriel CSS >Comment CSS peut-il empêcher les sauts de ligne lors de l'impression de grands tableaux HTML ?

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

Mary-Kate Olsenoriginal: 2024-12-20 00:45:16388parcourir

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>

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!

css html for while auto break using this table tr issue

Déclaration：

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

Article précédent：Comment puis-je utiliser avec succès les variables Sass dans la fonction CSS `calc()` ?Article suivant：Comment puis-je utiliser avec succès les variables Sass dans la fonction CSS `calc()` ?

Articles Liés

Voir plus