CSS-Seitenumbrüche beim Rendern von PDF
IronPDF beachtet die standardmäßigen CSS-Paginierungsregeln, sodass Sie steuern können, wo eine Seite durch die Hinzufügung der richtigen Deklarationen zu Ihrem HTML geteilt wird. Dieses Beispiel erzwingt einen Seitenumbruch nach jeder Tabellenzeile.
Lösung
1. Fügen Sie Druckregeln zu Ihrem CSS hinzu
Wickeln Sie die Paginierungsregeln in einen @media print Block und wenden Sie einen Umbruch auf jeden <tr> an. Sowohl das Legacy page-break-after als auch das moderne break-after sind zur Kompatibilität enthalten, während die Kopfzeile normal fließt.
<!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>Beim Rendern wird jede Körperzeile auf ihrer eigenen Seite platziert, während die thead Zeile ihren auto Wert beibehält, sodass kein zusätzlicher Umbruch ausgelöst wird.
2. Verhindern Sie, dass eine Zeile über Seiten hinweg geteilt wird
Wenn Ihr Ziel darin besteht, eine Zeile intakt zu halten, anstatt Brüche zwischen den Zeilen zu erzwingen, lassen Sie den erzwungenen Umbruch weg und verwenden Sie stattdessen page-break-inside: avoid:
tr {
page-break-inside: avoid; /* Prevent row from splitting */
page-break-after: auto;
}page-break-inside: avoid weist den Renderer an, die ganze Zeile auf die nächste Seite zu schieben, anstatt sie zu halbieren, und der auto Wert lässt die natürliche Paginierung darüber entscheiden, wo der Umbruch erfolgt.
Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender Handbücher.
