Printing HTML TABLE across multiple pages Options

[NarendraPathya]

I'm using IE7 (and I cant change browser version or browser, I've to find solution on IE7 only) and want to print table with all borders (border also to it's all rows ) and the table has many rows and the table covers two to three pages, but while printing that table, the row cuts into half at page break. I know that this problem can be solved using page-break-inside:avoid, but this doesn't work in IE7, pls share if any other solution.

This post has been edited by NarendraPathya: Sep 10 2012, 10:36 PM

[JohnnySteel]

I'm having exactly the same problem with IE11. Does anyone know the answer to this issue?

[CharlesEF]

There is a CSS2 attribute that might help. Browser support might be better in modern browsers. page-break-inside: avoid; Read this.

[JohnnySteel]

Thank you for the suggestion. Unfortunately, the @page rules cannot be applied to table rows as far as I can tell.
Some of the alternatives I have tried are as follows (none of which seem to work):

1) In Style Sheet:
TR#nobreak {display:block; page-break-inside: avoid;}
Then added ID to the table row element:
<tr id="nobreak"><td...

2) Applied the style directly into the <tr> element:
<tr style="display: block; break-inside: avoid-page;">

3) Set up "@media print" rule in Style Sheet:
@media print {TR {display:block; page-break-inside:avoid; page-break-after:auto; page-break-before:auto;} td {display:block; page-break-inside:avoid; page-break-after:auto; page-break-before:auto;} thead { display:table-header-group;} }

4) Similar to above, minus a few attributes:
@media print {TR {display:block; page-break-inside:avoid;} td {display:block; page-break-inside:avoid;} thead { display:table-header-group;} }

5) Applied all the above to <td> elements, too, although it did not make sense to me to do so (desperation?).

The connection to the CSS from the web page is OK, as I can add table cell borders, etc., into the style sheet and they all come through into the tables on the page, no problem.

Haven't tried the orphans and widows on table cell content at this stage, as I suspect this only applies to paragraphs (and similar).

[CharlesEF]

When I google 'html prevent table rows from breaking across pages' many posts on StackOverflow claim that it does work. Even in IE8. I have never needed to try it myself. Try the search yourself and maybe you can find the answer.

[pandy]

According to this support for the 'avoid' value is lacking and IE7 has no support at all for page-break.
http://caniuse.com/#feat=css-page-break

JohnnySteel, maybe you could try to force a break before or after instead for IE11? If page-break works at all with tables. I have no experience either. Don't even own a printer. Or a fairly modern version of IE

[Christian J]

Don't even own a printer.

Doesn't the browser's print preview show anything?

[CharlesEF]

For 'Print Preview' to work do you need a printer driver installed? Even if you don't have the printer.

[JohnnySteel]

When I google 'html prevent table rows from breaking across pages' many posts on StackOverflow claim that it does work. Even in IE8. I have never needed to try it myself. Try the search yourself and maybe you can find the answer.

Thank you. I have spent the last 5 days doing just that, including the StackOverFlow site. Many suggestions are offered but very few seem to work. Some people claim that their suggestions work, but many others are unable to get them to work.

This post has been edited by JohnnySteel: Jun 15 2016, 10:26 PM

[JohnnySteel]

According to this support for the 'avoid' value is lacking and IE7 has no support at all for page-break.
http://caniuse.com/#feat=css-page-break

JohnnySteel, maybe you could try to force a break before or after instead for IE11? If page-break works at all with tables. I have no experience either. Don't even own a printer. Or a fairly modern version of IE

Thank you for the link. I had seen a different page on the same site that came up in a previous search that only went as far as IE10.

On the target page for the link above, one of the comments it makes for IE11 is: "Does not support avoid for page-break-before & page-break-after (only page-break-inside)." So, it does indicate it should work, but not necessarily for table rows. Microsoft seem a little cagey about claiming outright that it does work for table rows, but infers that it works for table rows.

I'm not sure how to create a page break between rows where the height of each table row is different because of the cell content, and then get it to page-break just before the end of the printed page.

As I'm working on an intranet site for this project, maybe there is a set up somewhere that is not right? I think I need a lot more information about this issue before I go charging off down that route.

Thank you for your suggestions.

This post has been edited by JohnnySteel: Jun 15 2016, 10:52 PM

[CharlesEF]

Have you tried applying my suggestion to each table cell? That's what I understand needs to be done. Make the CSS rule a class and apply it to each table cell. Please let me know if it works.

[JohnnySteel]

Have you tried applying my suggestion to each table cell? That's what I understand needs to be done. Make the CSS rule a class and apply it to each table cell. Please let me know if it works.

I had a go at doing that once before without success, but tried it again just now and it still didn't work. I removed the attributes from <tr> so as not to interfere with the <td> class just to make sure.

Each table cell was designated with the class "nobreak" as:
<td class="nobreak">...

and the class in the CSS as:
td.nobreak {display:block; page-break-inside: avoid; border: 1 solid #CCCCCC; font-family: "Arial"; font-size: 84%;}

The borders and text font came through as specified in the class, but not the page break attributes.

Any other ideas? I'm all ears.

[CharlesEF]

As I said, I have never done this before. I was hoping my cell idea would work. Check back in a few days, maybe I can find something.

[CharlesEF]

Attached is a sample document I put together. The table has 20 rows and 2 columns. Table headings are printed on each page and table rows don't break across pages. Most modern browsers most likely don't need the CSS for <thead> but I put it in anyway, just in case. Tested and works in Firefox v47 and IE v11. Doesn't work in Chromodo v48.12.18.254 (Chrome based), table headings aren't printed on each page and table rows do break across pages. At this time I didn't try to figure out why, maybe later.

After I finished the document I removed the class from all the <tr>'s which broke the rows splitting across pages so I put them back in. I didn't try to remove the class from the <td>'s, maybe you can try that.

Test it on your browsers and let me know how it goes.
 table.html ( 13.1k ) Number of downloads: 864


This post has been edited by CharlesEF: Jun 17 2016, 08:23 AM

[JohnnySteel]

Attached is a sample document I put together. The table has 20 rows and 2 columns. Table headings are printed on each page and table rows don't break across pages. Most modern browsers most likely don't need the CSS for <thead> but I put it in anyway, just in case. Tested and works in Firefox v47 and IE v11. Doesn't work in Chromodo v48.12.18.254 (Chrome based), table headings aren't printed on each page and table rows do break across pages. At this time I didn't try to figure out why, maybe later.

After I finished the document I removed the class from all the <tr>'s which broke the rows splitting across pages so I put them back in. I didn't try to remove the class from the <td>'s, maybe you can try that.

Test it on your browsers and let me know how it goes.
 table.html ( 13.1k ) Number of downloads: 864

Thank you for your efforts in doing this. It is much appreciated.
I can confirm that it does not work in either IE11 nor Chrome V51.0.2704.103. The attached PDF file was printed from IE11, so you can see the heading row carried over to each page, but the rows still split across the cells.
I did try removing the class from all the <td> tags, but it made no difference to the results.
So, the question is, of course, if it works on your PC and not on mine, there must be some differences to cause this. Maybe a setting somewhere?
 table.pdf ( 82.18k ) Number of downloads: 612

[CharlesEF]

Well, my OS is Windows 7 Ultimate 32-Bit and my IE11 version is 11.0.32. When i preview the document I get 4 pages. I tried to post pictures but they were too big, so click here to download a zip file. As for my settings, I made no changes that I know of that would affect this. Attached is a newer version of the table document (works in both browsers I mentioned before).
 table.html ( 12.31k ) Number of downloads: 687

[JohnnySteel]

Well, my OS is Windows 7 Ultimate 32-Bit and my IE11 version is 11.0.32. When i preview the document I get 4 pages. I tried to post pictures but they were too big, so click here to download a zip file. As for my settings, I made no changes that I know of that would affect this. Attached is a newer version of the table document (works in both browsers I mentioned before).
 table.html ( 12.31k ) Number of downloads: 687

I certainly appreciate your help. I'm a lot further ahead with this now. It's beginning to look like a PC set up, perhaps?
- Just spoke to one of our IT experts and he does not think it is a PC set up issue at all. He suggested I play with the compatibility settings a bit and see if that makes any difference. (It didn't.)

Not sure on the specific version of Windows 7 I'm using as I was unable to find the information.
IE11 is the same as yours, except that the patch from KB3154070 is also installed to rectify a number of formatting issues known to exist with IE11. I might start trawling through the Advanced settings in IE11 and see what I can find. However, the same issue exists with Chrome (Version 51.0.2704.103 m) so I'm not holding out to find anything there.

The example pictures you included are exactly what I expected to see, but unfortunately don't.
I like the new version of your HTML table. It's nicely coded and very clear to see what is going on.

If you can think of anything else, please let me know.
Many thanks.

This post has been edited by JohnnySteel: Jun 20 2016, 09:06 PM

[CharlesEF]

If you right click on 'My Computer' and click on 'Properties' you should see which version of Windows you have, that's what I did (but I installed it so I already knew). I have applied all updates from Windows Update so I would think we have the same updates.

The Chrome based browser I tested on also doesn't work. It doesn't even print headers on every page. I have already reported the problems to Comodo (I use their firewall).

Anyway, if I find any information I'll post again. As for now I have no idea why IE11 works for me but not for you.

This post has been edited by CharlesEF: Jun 20 2016, 09:37 PM

[JohnnySteel]

If you right click on 'My Computer' and click on 'Properties' you should see which version of Windows you have, that's what I did (but I installed it so I already knew). I have applied all updates from Windows Update so I would think we have the same updates.

The Chrome based browser I tested on also doesn't work. It doesn't even print headers on every page. I have already reported the problems to Comodo (I use their firewall).

Anyway, if I find any information I'll post again. As for now I have no idea why IE11 works for me but not for you.

Ah! So, that's where it was hiding!
OK, I can confirm it is Windows 7 Professional X86 Rev 1.7.

I have just tried some different printers and get slightly different results as to where the page break occurs. In most cases it still breaks through a table row, although at slightly different heights and the text moves up or down accordingly. I wonder if there is something missing in the printer spool file that does not specify where to break the page when printing?

Earlier in this thread there is a note about MS being a bit cagey about claiming outright that "page-break-inside: avoid" does work for table rows in IE. Maybe they are aware that it works in some cases, but not all?

Thank you for your help and suggestions. I have learned quite a lot.

[CharlesEF]

Ok, we both have 32-Bit versions. I would expect different printers to print the same document a little different, I would think that is normal. And yes, maybe MS is aware of the problem but who knows for sure.

If I learn anything new I'll post back.