4

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?

Community
  • 1
  • 1
sarsarahman
  • 1,078
  • 5
  • 11
  • 26
  • 1
    if you can post an example using www.jsbin.com it will help anyone coming up with a suggestion. – bitoiu Jul 20 '13 at 11:15
  • @MohammadAreebSiddiqui did you checked my previous code. i tried what you have described but that dint worked for me. please check my code and tell me if anything is wrong with that. – sarsarahman Jul 20 '13 at 11:30
  • Finally i resolved this issue. I made` tr{display:block;}` and then i fixed the the cell spacing. page break only works on block level elements. – sarsarahman Jul 25 '13 at 06:55

6 Answers6

14

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.

Henk van Boeijen
  • 7,357
  • 6
  • 32
  • 42
sarsarahman
  • 1,078
  • 5
  • 11
  • 26
2

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.

sabof
  • 8,062
  • 4
  • 28
  • 52
2

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.

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
  • did you checked my previous code. i tried what you have described but that dint worked for me. please check my code and tell me if anything is wrong with that. – sarsarahman Jul 20 '13 at 11:48
  • 1
    Finally i resolved this issue. I made` tr{display:block;} ` and then i fixed the the cell spacing. page break only works on block level elements. – sarsarahman Jul 25 '13 at 06:54
1

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

Christopher Hart
  • 19
  • 2
  • i am a newbie this sounds greek and latin. could you please explain it simply. – sarsarahman Jul 20 '13 at 11:54
  • Finally i resolved this issue. I made ` tr{display:block;} ` and then i fixed the the cell spacing. page break only works on block level elements. – sarsarahman Jul 25 '13 at 06:55
0

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;
    }
Mahib
  • 3,977
  • 5
  • 53
  • 62
0

This works in Chrome (2022):

tr {
    page-break-inside: avoid;
}

It will prevent a table row from being split in a page break.

alysdal
  • 1
  • 3