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

html css printing css-tables page-break
Mohammad Saberi picture Mohammad Saberi · Jan 3, 2012 · Viewed 219.5k times · Source

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?

Answer

Hemant Metalia picture Hemant Metalia · Jan 3, 2012

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.

Related questions

How to make a HTML Page in A4 paper size page(s)?

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word? Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions …

Read More
How to print HTML content on click of a button, but not the page?

I want to print some HTML content, when the user clicks on a button. Once the user clicks on that button, the print dialog of the browser will open, but it will not print the webpage. Instead, it will print …

Read More
Landscape printing from HTML

I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings? And what are the options amongst browsers.

Read More