Saltos de página CSS al renderizar PDF
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>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.
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 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 estructurados y visualmente atractivos.
