Les sauts de page CSS lors du rendu PDF

Mis à jour:28 juin 2026

Translated

View the article in English

IronPDF respecte les règles de pagination CSS standards, vous contrôlez donc où une page se coupe en ajoutant les bonnes déclarations à votre HTML. Cet exemple force un saut de page après chaque ligne de tableau.

Solution

1. Ajouter des règles d'impression à votre CSS

Enveloppez les règles de pagination dans un bloc @media print et appliquez une coupure à chaque <tr>. Les deux page-break-after hérités et break-after modernes sont inclus pour la compatibilité, tandis que la rangée d'en-tête reste fluide.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Page Break After Each Table Row</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #333;
            padding: 8px;
        }
        /* PRINT RULES */
        @media print {
            tr {
                page-break-after: always; /* legacy */
                break-after: page; /* modern */
            }
            thead tr {
                page-break-after: auto;
                break-after: auto;
            }
        }
    </style>
</head>
<body>
    <h2>Page Break After Every Row</h2>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item One</td>
                <td>This row will appear on its own page.</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item Two</td>
                <td>This row will also appear on its own page.</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Item Three</td>
                <td>Every row starts a new page.</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Page Break After Each Table Row</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #333;
            padding: 8px;
        }
        /* PRINT RULES */
        @media print {
            tr {
                page-break-after: always; /* legacy */
                break-after: page; /* modern */
            }
            thead tr {
                page-break-after: auto;
                break-after: auto;
            }
        }
    </style>
</head>
<body>
    <h2>Page Break After Every Row</h2>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item One</td>
                <td>This row will appear on its own page.</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item Two</td>
                <td>This row will also appear on its own page.</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Item Three</td>
                <td>Every row starts a new page.</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

HTML

Lors du rendu, chaque ligne du corps atterrit sur sa propre page, tandis que la ligne thead garde sa valeur auto pour éviter de déclencher une coupure supplémentaire.

PDF rendu montrant chaque ligne du tableau sur sa propre page

2. Empêcher une ligne de se diviser sur plusieurs pages

Si votre objectif est de garder une ligne intacte plutôt que d'imposer des coupures entre les lignes, supprimez la coupure forcée et utilisez page-break-inside: avoid à la place :

tr {
    page-break-inside: avoid; /* Prevent row from splitting */
    page-break-after: auto;
}

page-break-inside: avoid indique au moteur de rendu de pousser toute la ligne à la page suivante plutôt que de la couper en deux, et la valeur auto permet à la pagination naturelle de décider où la coupure se situera.

Curtis Chau

Discutez maintenant avec l'équipe d'ingénierie

Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Prêt à commencer ?

Nuget Téléchargements 20,296,129 | Version : 2026.7 vient de sortir