Les sauts de page CSS lors du rendu PDF
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>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.
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 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 et créer des manuels bien structurés et visuellement attrayants.
