htmlcssprintingcss-tablespage-break

How to apply CSS page-break to print a table with lots of rows?

I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-before and page-break-after CSS properties. Where do I put them in my code in order to force page breaking if needed?

Solution

  • You can use the following:

    <style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

    Refer the W3C's CSS Print Profile specification for details.

    And also refer the Salesforce developer forums.