4

I have an application which prints the html table using window.print(), The application is working fine when i click the print hyperlink, the problem which i am facing is the page break up, I have goggled and found many solutions , majority of them uses css for resolving the issue, but when i tried the css as shown below its not working. A sample demo i have mocked up in JS-Fiddle to show the issue

Test it in chrome so that one can see the preview and use page size as A4 to view the page break.

enter image description here

JSFiddle

@media print {
    body * {
        visibility: hidden;
    }
    div {
        page-break-inside: avoid;
    }
    table {
        page-break-after: always;
        page-break-inside: auto;
    }
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    td {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    thead {
        display: table-header-group;
    }
    tfoot {
        display: table-footer-group;
    }

    #printSection * {
        visibility: visible;
    }
    #printSection {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100%;
    }
}
Alex Man
  • 4,746
  • 17
  • 93
  • 178
  • possible duplicate of [How to deal with page breaks when printing a large HTML table](http://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table) – Shaeldon Oct 23 '14 at 07:31
  • have anyone read my question before marking it as duplicate, i have seen all those answers added all those css still i am getting break-ups – Alex Man Oct 23 '14 at 07:32
  • yes i have, and spent 10 minuts trying to find a solution which i could not. page-break seems not to be fully supported by now on most browsers. Only Opera seems to be able to handle it. – Shaeldon Oct 23 '14 at 07:34
  • so what's the solution for this for other browsers – Alex Man Oct 23 '14 at 07:35
  • [This example of mine here](http://jsfiddle.net/ost075o2/14/), seems to work slightly better in that the text is not cut-off. Not perfect though. – misterManSam Oct 27 '14 at 05:40
  • @misterManSam but there everything is printing....actually i want only the table to be printed – Alex Man Oct 27 '14 at 05:52
  • yes, use `display: none` inside the `@media print` on anything that you don't want to show. Like in [this example](http://jsfiddle.net/ost075o2/15/) you only get one table displayed on print. – misterManSam Oct 27 '14 at 05:57
  • @misterManSam does this works in all browsers – Alex Man Oct 27 '14 at 06:18
  • @AlexMan - `display: none`? Absolutely everywhere. – misterManSam Oct 27 '14 at 06:21

3 Answers3

1

Try this fiddle

jsfiddle.net/w2p5kbcj/14

CSS

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    table {
        page-break-after: auto;
        page-break-inside: auto;
        width:100%;
        border-width: 1px solid #000;
        font-size:16px;
        font-family:Arial;
    }

     td{
        padding:2px 5px 2px 5px;
    }

}

Reference fom old stack overflow thread

How to deal with page breaks when printing a large HTML table

Javascript for this purpose

https://github.com/AAverin/JSUtils/blob/master/wkhtmltopdfTableSplitHack/wkhtmltopdf_tableSplitHack.js

Just add the js to your code and add the class 'splitForPrint' to your table and it will neatly split the table into multiple pages and add the table header to each page.

Community
  • 1
  • 1
Manjunath Siddappa
  • 2,126
  • 2
  • 21
  • 40
  • that css is not working in chrome, also when added the script it does not solve my problem instead it have changed my tables styles tooo http://jsfiddle.net/w2p5kbcj/1/ – Alex Man Oct 23 '14 at 09:53
  • i faced same issue recently,take the print first and see. it will varies in print and preview. one more thing you dont need to include script, i just given some reference. – Manjunath Siddappa Oct 23 '14 at 10:01
  • check in chrome and change the page size to 16K you could see the page break up.... – Alex Man Oct 23 '14 at 10:05
  • @Alex Man -i didnt get these words `change the page size to 16K you could see the page break up`. how to do it. – Manjunath Siddappa Oct 23 '14 at 10:08
  • open the jsfiddle in chrome and click the print hyperlink which is given above the html table in the jsfiddle output, in chrome you can see the preview, there at the left hand side you have an option to change the page size, there change it to different page sizes to see the page break up example 16K – Alex Man Oct 23 '14 at 10:10
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/63543/discussion-between-manjunath-siddappa-and-alex-man). – Manjunath Siddappa Oct 23 '14 at 10:12
  • Since i am not getting a apt answer, I have given +50 bounty for this question..... – Alex Man Oct 27 '14 at 04:53
  • hmm... right move. let us see what others say about this, it will be helpful to us in future – Manjunath Siddappa Oct 27 '14 at 13:00
1
@media print {
  .page-break  { display: none; page-break-before: avoid; }
}

This ensures that the page-break is never seen by the printer. 

<div class="page-break"></div>
Hardik Sheth
  • 19
  • 3
0

I had the exactly same issue. Only thing that worked was to change table with divs.

So you can use div > div > div instead of table > tr > td and make them display table with css like this:

div(style: display: table;)
    > div(style: display: table-row;)
        > div(style: display: table-cell;)

Update

Not all browsers support properties like this: page-break-after: always;. Even Chrome ignores it. So try that layout, if it works for you.

Update 2

Even if it does not work for you (anyways, I remember it worked), with this layout, you can easily play with it in media print as well like this:

@media print {
    div > div {
        display: block;

        > div {
              display: inline-block;
        }
    }
}

You can change first div with .table class and then move on. See an example: https://github.com/nikoloza/Scratch/blob/master/scratch/less/core/classes.less#L83

nikoloza
  • 968
  • 2
  • 12
  • 30