Why the split happens
A PDF page is a fixed-size box. The renderer lays out your HTML normally, then starts a new page each time the content passes the bottom margin. By default it will break in the middle of almost anything, including a table row or a bordered card, because it treats the page edge like any other line break.
Keep a block from splitting
Set break-inside: avoid on any element that should stay on one page. Keep the legacy page-break-inside: avoid next to it, because some engines still read only the older name.
.invoice-row,
.card,
figure {
break-inside: avoid;
page-break-inside: avoid; /* legacy alias */
}Force a break where you want one
To start a section on a fresh page, use break-before: page, or break-after: page on the element before it. The legacy spelling is page-break-before: always.
.section {
break-before: page;
page-break-before: always; /* legacy alias */
}Fix tables that break badly
Two rules handle most table problems: stop rows from splitting, and tell the engine to reprint the header row on every page.
tr {
break-inside: avoid;
}
thead {
display: table-header-group; /* repeats on each page */
}If the CSS is ignored, check the engine
These properties only work if your PDF engine implements the CSS paged-media model. Chromium-based renderers (Puppeteer and Playwright) and dedicated print engines like WeasyPrint and Prince honor them well. wkhtmltopdf runs on a frozen 2012 build of Qt WebKit and often ignores break-inside: avoid, especially inside tables, so if you are stuck there, switching to a Chromium or WeasyPrint based renderer is usually the real fix. For finer control, orphans and widows set how many lines must stay together at a page boundary.
Back to All Questions