How To Print A Large Html Table With Page Breakers?

I want to print a large HTML table without breaking it's rows at the end of each page. I used following code, but its not working.

Solution 1:

you could try using orphans to specify the number of empty lines to be left at the bottom of a page; if an element's layout conflicts with an orphans setting, the element will be printed on the next page. browser support is pretty shoddy though. i would set it on tr for your example, like this: tr{orphans:3}

Solution 2:

Try

<tableborder="1"><?phpfor($i=0;$i<50;$i++) { ?><tr><tdheight="50"width="130">gukgu</td><tdheight="50"width="180"height="50"width="145">gukgu</td><tdheight="50"width="130">gukgu</td><tdheight="50"width="180"height="50"width="145">gukgu</td></tr><?php } ?></table>

You have table tag inside for loop put it before for loop.

Solution 3:

I'm late coming to this discussion, but I had a similar problem and this was the closest discussion I could find. I've solved my own problem, and want to share it with the next guy.

I need to print a large table that is divided into segments of rows. Each segment begins with a segment header row, followed by about 5 data rows. I don't want page breaks within any segment, but I do want columns to line up across the entire table. The CSS "page-break-inside:avoid" property only works on top-level block elements, so I can't use <div> within a <table> to control pagination.

But I can use <tbody>! Apparently, in modern browsers the <table> element is just a control feature for grouping the various table parts, not a block element at all, and <tbody> is the actual block element. So page-break-inside:avoid works on it. Also, its legal to have multiple <tbody> tags within a single <table>.

So that's the secret: Use use a separate <tbody> for each segment of the table, each with the "page-break-inside:avoid" CSS property.

There are some complications. First, IE11 seems to require an "orphans:5" CSS property for this to work. Second, I tried using <thead> for the segment header row, giving it a "page-break-after: avoid" attribute, but I ran into a lot of cross-browser issues so I ended up just putting the segment headers inside their corresponding <tbody> tags. It works fine.

CSS:

tbody.segment {
        page-break-inside: avoid;
        orphans: 5;
    }
    th.segment {
        border: thin solid black;
    }

HTML:

<table><tbodyclass="segment"><tr><thclass="segment"colspan="3">Segment 1</th></tr><tr><td>data1aa</td><td>data1ab</td><td>data1ac</td><tr>
            ...
            <tr><td>data1za</td><td>data1zb</td><td>data1zc</td><tr></tbody><tbodyclass="segment"><tr><thclass="segment"colspan="3">Segment 2</th></tr><tr><td>data2aa</td><td>data2ab</td><td>data2ac</td><tr>
            ...
            <tr><td>data2za</td><td>data2zb</td><td>data2zc</td><tr></tbody></table>

Solution 4:

All of the popular desktop browsers that aren't webkit-based (i.e. Firefox and Internet Explorer) now support the CSS declaration page-break-inside: avoid; on the <tr> element, which solves the OP's problem in those browsers. Webkit support is apparently limited to block elements, so the problem technically hasn't been solved yet for Chrome, Safari and Opera (and I'm pretty sure none of the other solutions posted here will help). However, it is possible to simulate the desired behavior by turning the table into a stack of unbreakable blocks. If fixed column widths are used, then this can be done with pure CSS, like so:

<style>table {border-collapse: collapse;}
  table > tbody > tr {
    display: block;
    page-break-inside: avoid;
  }
  table > tbody > tr > td {
    border: 2px solid black;
    width: 100px;
    max-width: 100px;
  }
  table > tbody > tr:first-child ~ tr > td {border-top: none;}
</style><table><tr><td>data</td><td>data</td><td>Multiple<br/>lines of<br/>data</td></tr><tr><td>data</td><td>data</td><td>Multiple<br/>lines of<br/>data</td></tr><tr><td>data</td><td>data</td><td>Multiple<br/>lines of<br/>data</td></tr></table>

If you don't want to use fixed column widths, then you'll have to use javascript to ensure the column widths won't vary from row to row. My answer to another post demonstrates one way to do this, but it includes repeating table headers, which makes it much more complicated than it needs to be in this case. Still might be worth a look, though.

Share