1. IronPDF
  2. 疑難排解
  3. 在渲染PDF時的CSS分頁中斷

Curtis Chau
Curtis Chau
已更新:

"# 渲染 PDF 時的 CSS 頁面中斷"

"IronPDF 遵從標準 CSS 分頁規則，因此您可以通過在 HTML 中新增正確的聲明來控制頁面的拆分位置。" "此範例在每個表格行後強制中斷。"

解決方案

"### 1. 向您的 CSS 新增列印規則"

將分頁規則包裝在<tr>應用一個換行。 出於相容性考量，包含了遺留的break-after，而標頭列則保持正常流動。

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

渲染時，每個正文行落在自己的頁面上，而auto值，因此不會觸發額外的換行。

渲染的PDF顯示每個表行在自己的頁面上

"### 2. 防止行在頁面之間分割"

如果您的目標是保持行完整而不是強行在行之間換行，請刪除強制換行並改用page-break-inside: avoid：

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

auto值讓自然分頁決定換行位置。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發，Curtis對物聯網（IoT）有濃厚的興趣，探索創新的方法來整合硬體和軟體。在空閒時間，他喜歡玩遊戲和建立Discord機器人，結合他對技術的熱愛與創造力。

準備開始了嗎？
Nuget 下載 20,296,129 | 版本： 2026.7 剛剛發布
Still Scrolling Icon

還在捲動嗎？

想快速獲得證明嗎？ PM > Install-Package IronPdf
執行範例 看您的HTML變成PDF。