1. IronPDF
  2. Fehlersuche
  3. CSS-Seitenumbrüche beim PDF-Rendering

CSS-Seitenumbrüche beim Rendern von PDF

Curtis Chau
Curtis Chau
Aktualisiert:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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

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.

Gerendertes PDF, das jede Tabellenzeile auf ihrer eigenen Seite zeigt

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
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
Technischer Autor

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

Weiterlesen
Bereit anzufangen?
Nuget Downloads 20,296,129 | Version: 2026.7 gerade veröffentlicht
Still Scrolling Icon

Scrollst du immer noch?

Sie brauchen schnell einen Beweis? PM > Install-Package IronPdf
Führen Sie eine Probe aus Sehen Sie zu, wie Ihr HTML-Code in eine PDF-Datei umgewandelt wird.