Saltos de página CSS al renderizar PDF

Actualizado:28 de junio de 2026

Translated

View the article in English

IronPDF respeta las reglas de paginación estándar de CSS, por lo que controlas dónde se divide una página añadiendo las declaraciones correctas a tu HTML. Este ejemplo fuerza un salto de página después de cada fila de tabla.

Solución

1. Añade reglas de impresión a tu CSS

Envuelve las reglas de paginación en un bloque @media print y aplica un salto a cada <tr>. Tanto el page-break-after heredado como el moderno break-after se incluyen para compatibilidad, mientras que la fila del encabezado se deja fluir normalmente.

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

Cuando se representa, cada fila del cuerpo cae en su propia página, mientras que la fila thead mantiene su valor auto para que no desencadene un salto adicional.

PDF renderizado mostrando cada fila de la tabla en su propia página

2. Evita que una fila se divida entre páginas

Si tu objetivo es mantener una fila intacta en lugar de forzar saltos entre filas, elimina el salto forzado y utiliza page-break-inside: avoid en su lugar:

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

page-break-inside: avoid indica al renderizador que mueva toda la fila a la siguiente página en lugar de cortarla por la mitad, y el valor auto permite a la paginación natural decidir dónde cae el salto.

Curtis Chau

Chatea con el equipo de ingeniería ahora

Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

¿Listo para empezar?

Nuget Descargas 20,296,129 | Versión: 2026.7 recién publicada