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

Question

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

User · Answer

I eventually realised that my bulk content that was overflowing the table and not breaking properly simply didn't even need to be inside a table.

While it's not a technical solution, it solved my problem to simply end the table when I no longer needed a table; then started a new one for the footer.

Hope it helps someone... good luck!

User · Answer

I have looked around for a fix for this  I have a jquery mobile site that has a final print page and it combines dozens of pages  I tried all the fixes above but the only thing I could get to work is this    lt div style  clear both important    gt  lt  div gt   lt div style  page-break-after always  gt  lt  div gt    lt div style  clear both important    gt   lt  div gt

User · Answer

You can use the following    lt style type  text css  gt     table   page-break-inside auto      tr      page-break-inside avoid  page-break-after auto    lt  style gt    Refer the W3C s CSS Print Profile specification for details   And also refer the Salesforce developer forums

User · Answer

Wherever you want to apply a break  either a table or tr  you needs to give a class for ex  page-break with CSS as mentioned below      class works for table row    table tr page-break    page-break-after always      lt tr class  page-break  gt      class works for table    table page-break    page-break-after always     lt table class  page-break  gt    and it will work as you required  Alternatively  you can also have div structure for same   CSS    media all     page-break    display  none        media print     page-break    display  block  page-break-before  always        Div    lt div class  page-break  gt  lt  div gt

User · Answer

You should use    lt tbody gt      lt tr gt    first page content here     lt  tr gt     lt tr gt          lt  tr gt   lt  tbody gt   lt tbody gt    next page content     lt  tbody gt    And CSS   tbody   display  block  page-break-before  avoid    tbody   display  block  page-break-after  always

User · Answer

Here is an example   Via css    lt style gt     my-table       page-break-before  always      page-break-after  always         my-table tr       page-break-inside  avoid       lt  style gt    or directly on the element    lt table style  page-break-before  always  page-break-after  always   gt     lt tr style  page-break-inside  avoid   gt            lt  tr gt   lt  table gt

User · Answer

Unfortunately the examples above didn t work for me in Chrome   I came up with the below solution where you can specify the max height in PXs of each page   This will then splits the table into separate tables when the rows equal that height     document  ready function         var MaxHeight   200      var RunningHeight   0      var PageNo   1          table splitForPrint gt tbody gt tr   each function               if  RunningHeight     this  height    gt  MaxHeight                RunningHeight   0              PageNo    1                     RunningHeight      this  height               this  attr  data-page-no   PageNo                 for i   1  i  lt   PageNo  i                 table splitForPrint   parent   append   lt div class  tablePage  gt  lt hr   gt  lt table id  Table    i      gt  lt tbody gt  lt  tbody gt  lt  table gt  lt hr   gt  lt  div gt              var rows      table tr data-page-no      i                       Table    i  find  tbody   append rows                table splitForPrint   remove           You will also need the below in your stylesheet      div tablePage           page-break-inside avoid  page-break-after always

User · Answer

this is working for me    lt td gt     lt div class  avoid  gt      Cell content     lt  div gt   lt  td gt       lt style type  text css  gt     avoid       page-break-inside  avoid  important      margin  4px 0 4px 0      to keep the page break from cutting too close to the text in the div         lt  style gt    From this thread  avoid page break inside row of table

User · Answer

If you know about how many you want on a page  you could always do this  It will start a new page after every 20th item    row-item nth-child 20n        page-break-after  always      page-break-inside  avoid

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

Examples related to html

Examples related to css

Examples related to printing

Examples related to css-tables

Examples related to page-break