Comment puis-je empêcher les sauts de page de diviser les lignes d'un tableau lors de l'impression de grands tableaux HTML ?-tutoriel CSS-php.cn

Comment puis-je empêcher les sauts de page de diviser les lignes d'un tableau lors de l'impression de grands tableaux HTML ?

Barbara Streisand

Libérer： 2024-12-17 15:58:10

original

602 Les gens l'ont consulté

How Can I Prevent Page Breaks from Splitting Table Rows When Printing Large HTML Tables?

Éviter les sauts de page dans l'impression de grands tableaux HTML

Dans le développement Web, l'impression de grands tableaux HTML peut poser des défis lors de la gestion des sauts de page. Ce problème survient lorsqu'une ligne de tableau est divisée sur plusieurs pages, ce qui entraîne des problèmes de lisibilité.

Le problème :

Lors de l'impression d'un long tableau HTML, il est possible que des sauts de page se produisent à des endroits inappropriés, interrompant la continuité des données du tableau. Cela se produit lorsqu'une ligne est divisée entre deux pages, une partie de la ligne apparaissant en bas d'une page et la partie restante en haut de la page suivante.

La solution :

Pour atténuer ce problème, les propriétés CSS page-break-inside et page-break-after peuvent être utilisé :

page-break-inside : contrôle les sauts de page dans un élément. Lorsqu'il est défini sur auto, il autorise les sauts de page dans l'élément, garantissant que les lignes du tableau ne sont pas divisées.
page-break-after : Spécifie si un saut de page doit se produire après l'élément actuel. En le définissant sur auto, vous autorisez les sauts de page après chaque ligne du tableau pour éviter le fractionnement.

Exemple de mise en œuvre :

Le code HTML et CSS suivant montre comment pour éviter les sauts de page dans l'impression de grands tableaux HTML :

<!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 utilisant ces propriétés CSS, le tableau HTML respectera désormais les sauts de page, garantissant que les lignes du tableau ne soient jamais réparties sur plusieurs pages, préservant ainsi la lisibilité.

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!