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

Comment puis-je empêcher les sauts de ligne lors de l'impression de grands tableaux HTML ?

Patricia Arquette

Libérer： 2024-12-26 03:46:09

original

370 Les gens l'ont consulté

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

Gestion des sauts de page dans l'impression de tableaux HTML

Lorsque vous êtes confronté à l'impression de tableaux HTML volumineux, la gestion des sauts de page est cruciale pour éviter les coupures disgracieuses de lignes. Une approche courante est suggérée par la question initiale : utiliser des DIV empilés au lieu de tableaux et appliquer les sauts de page nécessaires. Cependant, avant de nous lancer dans un changement aussi important, explorons une solution alternative qui maintient l'utilisation des tableaux.

La clé pour gérer efficacement les sauts de page réside dans les propriétés CSS. En appliquant les règles CSS suivantes à votre tableau, vous pouvez empêcher la répartition des lignes sur plusieurs pages :

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

La propriété page-break-inside du tableau spécifie que des sauts de page peuvent se produire dans le tableau. La propriété page-break-inside pour les lignes garantit que les lignes ne seront pas divisées sur plusieurs pages, et la propriété page-break-after empêche un saut de page immédiatement après une ligne. Enfin, les propriétés d'affichage des éléments d'en-tête et de pied de page garantissent qu'ils sont associés au tableau à des fins d'impression.

Vous trouverez ci-dessous un tableau HTML modifié qui intègre ces propriétés CSS :

<!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 implémentant ces règles CSS, vous pouvez empêcher efficacement les sauts de ligne et garantir l'intégrité de votre tableau imprimé sur plusieurs pages.

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!