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

Question

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

i originally used this css

#membersList table { page-break-inside:auto; position:relative}
#membersList tr { page-break-before:avoid; page-break-after:auto;position:relative}
#membersList td{ border:solid 1px #CCCCCC;width:auto;position:relative}
#membersList thead { display:table-header-group;position:relative }
#membersList tfoot { display:table-footer-group;positioion:relative} 

this dint worked, so I searched and got this Google Chrome print page interrupt link

based on one of the answers in this link i use the following CSS attribute

 -webkit-region-break-inside: avoid;

But when I start and test the element, it is stroked by default.

What will be the solution? There are many posts that I have been looking for. It is said that recent versions do not support page breaks. If this is true, then what other solution to achieve page breaks in Google Chrome?

Answer 1

, . tr{display:block;} .

.

Answer 2

page-break-after css always. ( - Chrome), , .

Answer 3

MDN:

WebKit ; -webkit-column-break-after -webkit-region-break-after , .

page-break-after , . :

CSS .

: . ( , ).

: .

: .

: , .

: , .

break-after:

CSS , , . , .

Answer 4

qt, . 168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13

Answer 5

- , , @sabof. , , 11 .

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

HTML-;

<div id="printSection">
    <div>

    </div>
</div>

I created the lines dynamically, so the jQuery logic was as follows:

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 was something like this:

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