Printing HTML tables without splitting a row across two pages

Question

I need to print some data in an HTML table from Internet Explorer (various versions) and Safari on OS X. Ignoring Safari for the moment.

When printing a table that has more rows than can fit on a page, the last row on the page is often split with part of the row on the first page and the rest of the row on the next page.

This looks ugly. Is there a way to avoid it?

I've been searching around and so far I've found page-break-before: always, but I'm not sure if that's what I'm looking for, since I won't know up front how many rows will fit on the page. e.g. the rows might be taller or shorter depending on the content and the user might be printing in portrait or landscape mode. I'm assuming A4 at least, but if the user was using US letter or some other paper size it would introduce even more uncertainty. Also, what about printer margins?

So is there a way around this? Or do I just have to guess how many rows will fit and force a page break after that? Will that even work?

Solution 1

You probably want to play around with page-break-before/after: auto. page-break-inside would be ideal but its not supported by most browsers.

Take a look here http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html for some good info.

Solution 2

How about page-break-inside:avoid?

There seem to be a lot of talk about this, however I did also find another SO article mentioning page-break-before:auto and applying to each table cell.

Solution 3

A few simple solutions do exist for preventing page breaks within rows, but they have some pretty big limitations that tend to make them useless for anything but intranet stuff.

A more versatile solution that's only slightly more complicated can be found here. Its main drawback is that it requires fixed column widths.

My favorite solution is quite a bit more complicated, but it will probably cause the fewest headaches in the end. It uses JavaScript to turn every row into a separate, unbreakable block (but not in a way that affects the table's appearance). I've posted a few answers that use this technique:

• Answer 1 (best)
• Answer 2

Comments

[Mrchief]

page-break-inside is not supported by most broswers, only Opera has full support for it.

[Wodin]

Thanks, I hadn't noticed the SO article you are referring to before posting, but I seem to have got better answers anyway :) Will try page-break-before: auto and see if it helps.

[Wodin]

Thanks for the westciv link. Reading it now.

[Wodin]

page-break-inside: avoid actually works for IE 8 and IE 9 in IE 8 compatibility mode. Unfortunately I'm trying to get it to work in a WebBrowser control embedded in FileMaker Pro (what FileMaker calls a Web Viewer) and not IE directly. This seems to work when IE 8 is installed, but not when IE 9 is installed :( Of course it also does not work for earlier versions of Internet Explorer.

[Wodin]

Well, I haven't found a proper solution. page-break-inside: avoid seems to be the best on IE8 or 9 in IE compat mode, but not in a webbrowser control. There is a registry key that's supposed to override the mode of the webbrowser control, but it did not work for me on a machine with IE9 even though the code worked fine in the full browser.

[Mrchief]

Yeah, well I've had trouble with the control in past too. It sounds crazy but it seems the control uses a different version than the installed browser.

[Wodin]

Thanks. Do you have a reference to this? I've tried searching and have found several mentions of it, but nothing to say exactly what it does or which versions it works on and whether it is expected to work on Chrome etc.

[Flavien Volken]

In Safari (Version > 5.0) it does enlarge the previous cell so that the current one starts on top of an new page. In that manner this current cell is not "split". The doc is here. There is 2 notes to consider: 1: You cannot use this property on absolutely positioned elements. 2: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

[Wodin]

Thanks. I meant any documentation specifically for webkit, but I suppose the W3Schools link should be fine. The problem is a large table is exactly where I want to use this sort of thing, because by default webkit will just randomly break in the middle of a tr.

[vicenteherrera]

This messes with rows representation.

[vicenteherrera]

In Chrome it seems page-break-inside only works with "block" elements. A workaround could be to use a <div> inside each cell with that css property, o apply a "display:block; page-break-inside:avoid" on some inside element of cell (if you try that last one on TR, it messes around with table layout).

[Wodin]

vicenteherrera: Can you elaborate on that? I haven't actually tried this yet, but how does it mess with the representation of a row and what are the effects of this?

[Wodin]

This looks promising, thanks. Not sure when I'll get a chance to have a proper look at it, though.

[ASL]

As of 2016, this should now work in recent browsers. Mozilla Developer Network claims "basic support" starting with Chrome 1.0, Firefox 19, IE 8.0, Opera 7.0, and Safari 1.3. (developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside) It works fine for me in recent Firefox.