CSS Sayfa Boşlukları PDF Render Edildiğinde

Güncellendi:Haziran 28, 2026

Translated

View the article in English

IronPDF, standart CSS sayfalandırma kurallarını onurlar, bu nedenle HTML'nize doğru beyanları ekleyerek bir sayfanın nerede ayrıldığını kontrol edersiniz. Bu örnek, her tablo satırından sonra bir sayfa ayrılmasını zorunlu kılar.

Çözüm

1. CSS'nize yazdırma kuralları ekleyin

Sayfalandırma kurallarını bir @media print bloğuna sarın ve her <tr> için bir kırılma uygulayın. Hem eski page-break-after hem de modern break-after uyumluluk için dahil edilmiştir, başlık satırı ise normal şekilde akmasına bırakılmıştır.

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

Render edildiğinde, her gövde satırı kendi sayfasına düşer, oysa thead satırı ekstra bir kırılma tetiklememesi için auto değerini korur.

Her tablo satırının kendi sayfasında gösterildiği PDF

2. Bir satırın sayfalar arasında bölünmesini önleme

Amacınız bir satırı bozmak yerine bütünlüğünü korumaksa, zorunlu kırılmayı bırakın ve bunun yerine page-break-inside: avoid kullanın:

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

page-break-inside: avoid render'a satırı ikiye bölmek yerine tüm satırı bir sonraki sayfaya itmesini söyler, ve auto değeri doğal sayfalandırmanın kırılmanın nerede olması gerektiğine karar vermesine imkan tanır.

Curtis Chau

Mühendislik ekibiyle şimdi sohbet edin

Teknik Yazar

Curtis Chau, Bilgisayar Bilimleri alanında Lisans Derecesine (Carleton Üniversitesi) sahip ve Node.js, TypeScript, JavaScript ve React konularında uzmanlaşmış ön uç geliştirmeyle ilgileniyor. Sezgisel ve estetik açıdan hoş kullanıcı arayüzleri oluşturma tutkunu, Curtis modern çerçevelerle çalışmayı ve iyi yapı...

Daha Fazla Oku

Başlamaya Hazır mısınız?

Nuget İndirmeler 20,296,129 | Sürüm: 2026.7 yeni yayınlandı