How to achieve page break in HTML table for Google Chrome?

Question

I am trying to print a large table generated with jQuery in an HTML page. I am using Chrome 26.0.141. The issue is with page break.

i initially used this css

<

Answer 1

I've used something like several tables to make this thing happen as @sabof mentioned. Say I wanted 11 rows should come on the page.

<table>
   11 * <tr></tr>
</table>
<table>
   11 * <tr></tr>
</table>

HTML markups;

<div id="printSection">
    <div>

    </div>
</div>

I created rows dynamically so the JQuery logic were the following;

var j = 23;

for (var i = 0; i < j; i++) {

    if (i != 0 && i % 11 == 0) {

         $("#printSection div").append("<table><tbody></tbody></table>");              
   }              

   var node = "<tr><td>Your Data</td></tr>";
   $("#printSection tbody").last().append(node);
   }
}

CSS were something like this;

#printSection table {            
        page-break-after: always;
        page-break-inside: avoid;
        break-inside: avoid;
    }

Answer 2

Finally I resolved this issue. I made tr{display:block;} and then I fixed the cell spacing.

Page break only works on block level elements.

Answer 3

I have provided a few patches to qt to improve table page breaks. You may wish to check out issue 168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13

Answer 4

As said on MDN:

WebKit browsers doesn't support this property; but some have the non-standard -webkit-column-break-after and -webkit-region-break-after with similar parameters as page-break-after.

So you need to use page-break-after with some value which suits you the best. Here are some of them:

The page-break-after CSS property adjusts page breaks after the current element.

auto: Initial value. Automatic page breaks (neither forced nor forbidden).

always: Always force page breaks after the element.

avoid: Avoid page breaks after the element.

left: Force page breaks after the element so that the next page is formatted as a left page.

right: Force page breaks after the element so that the next page is formatted as a right page.

You can also use the break-after property:

The break-after CSS property describes how the page, column or region break behavior after the generated box. If there is no generated box, the property is ignored.

Answer 5

You might need to split the table into several parts, and set their page-break-after css property to always. This works (with beta Chrome), I don't know if there is a way to do it in a continuous table.