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

css, html, javascript, jquery

Solution

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.

Problem

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 ``` #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 link Google Chrome Printing Page Breaks based on one of the answer in that link i am using the following CSS attribute ``` -webkit-region-break-inside: avoid; ``` But when I run and inspect the element, it is stroked out by default. What would be the solution? There are lot of posts I searched. They say that recent versions don't support page break. If it's true then what other solution is there to achieve page break in Google Chrome?

Original source

Related problems