How to apply CSS page-break to print a table with lots of rows?
To ensure legible printouts of extensive tables, utilize CSS's page-break-inside: avoid on each tr element. This guarantees each row is completely on one page:
This CSS code ensures no rows straddle two pages, and the table headers reoccur on each new page, which promotes clarity and cohesion in your printed tables.
Fundamentals of CSS Page Breaks with Tables
Avoiding Row Interruption
Application of page-break-inside: avoid; on rows is paramount to maintain the integrity of table rows during printing. However, this functionality extends beyond just this.
Smooth Page Transitions
Utilizing page-break-after: always; on a tr signifies the start of a new page after that row ends. Be careful only to use this when necessary, though. Overuse might turn your neat printout into several pages with single rows — a so-called "table strips," not so effective for large data sets.
Browser Compatibility Considerations
Remember to ensure browser support using Can I use... — the user's browser can significantly affect the page break behavior. Compatibility is crucial for uniform print results.
Solutions and Advanced Tips
JavaScript for Dynamic Table Pagination
Should your table need pagination within the page or client-side controlled pagination, JavaScript could come in handy. Typical applications include:
- Implementing data attributes for pagination
- Initialization via jQuery
- Control of maximum height dynamically, forcing desired breaks
Fashioning Print Styles
Within your @media print block, remember to show or hide elements as required. Non-critical elements, such as site navigation or non-content-related images, can be hidden with display: none.
Other Helpful CSS Properties
Sometimes, page-break-* isn't a silver bullet. There may be times when you need clear: both; on a pseudo-element after rows to enforce breaks, or manually adjust margin to avoid breaks being too close to content.
The Beauty of Community
Interacting with relevant threads on platforms like Salesforce developer forums can reveal tested, practical solutions that you can adapt to your specific needs.
Dynamic Page Breaks with JavaScript
For dynamically inserted large tables, consider creating CSS classes that apply page breaks based on certain conditions such as row count or height.
Div Breakpoints
Strategically placing a div with a page-break class lets you manually dictate where breaks should occur, if automatic methods aren't reliable.
Inline Styles vs. Class/ID Selectors
For indecipherable code and bloating HTML, avoid inline styles for page breaks. Instead, use class or ID selectors for maintainability and sharper print layout.
Was this article helpful?