Comment puis-je empêcher les lignes d'un tableau HTML de se diviser sur plusieurs pages lors de l'impression ?-tutoriel CSS-php.cn

Comment puis-je empêcher les lignes d'un tableau HTML de se diviser sur plusieurs pages lors de l'impression ?

Patricia Arquette

Libérer： 2024-12-14 22:56:14

original

432 Les gens l'ont consulté

How Can I Prevent HTML Table Rows from Splitting Across Pages When Printing?

Gérer les sauts de page dans l'impression de tableaux HTML

Lors de l'impression de tableaux HTML volumineux, la gestion des sauts de page est cruciale pour maintenir la lisibilité. Pour éviter que les lignes ne soient réparties sur plusieurs pages, explorez la solution suivante :

Vous pouvez utiliser des styles CSS pour contrôler les sauts de page dans votre tableau HTML :

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

Copier après la connexion

Voici un exemple de tableau HTML avec ceux-ci Styles CSS appliqués :

<!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

La mise en œuvre de ces règles CSS garantit que :

page-break-inside:avoid on tr elements empêche les sauts de ligne dans une page.
page-break-after:auto on tr elements permet un saut de page après chaque rangée, en vous assurant qu'ils ne sont pas divisés.
display:table-header-group et display:table-footer-group sur les éléments thead et tfoot conservent l'en-tête et le pied de page du tableau sur leurs pages respectives.

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!