Przerwy stron CSS podczas renderowania PDF

Zaktualizowano:czerwca 28, 2026

Translated

View the article in English

IronPDF honoruje standardowe zasady paginacji CSS, więc kontrolujesz, gdzie strona się dzieli, dodając odpowiednie deklaracje do swojego HTML. Ten przykład wymusza przerwę strony po każdym wierszu tabeli.

Rozwiązanie

1. Dodaj zasady druku do swojego CSS

Otocz zasady paginacji blokiem @media print i zastosuj przerwę do każdego <tr>. Zarówno starszy page-break-after jak i nowoczesny break-after są uwzględnione dla zgodności, podczas gdy wiersz nagłówka przepływa normalnie.

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

Podczas renderowania, każdy wiersz ciała kończy się na swojej stronie, podczas gdy wiersz thead zachowuje swoją wartość auto, aby nie wywołać dodatkowej przerwy.

Renderowany PDF pokazujący każdy wiersz tabeli na swojej stronie

2. Zapobiec podziałowi wiersza na strony

Jeśli Twoim celem jest utrzymanie wiersza w całości, zamiast wymuszania przerw między wierszami, usuń przymusową przerwę i użyj page-break-inside: avoid zamiast tego:

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

page-break-inside: avoid mówi rendererowi, aby przenieść cały wiersz na następną stronę zamiast go przecinać, a wartość auto pozwala naturalnej paginacji zdecydować, gdzie padowa przypadka.

Curtis Chau

Czat z zespołem inżynierów teraz

Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podrę...

Czytaj więcej

Gotowy, aby rozpocząć?

Nuget Pliki do pobrania 20,296,129 | Wersja: 2026.7 właśnie wydany