17

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?

Wodin
  • 3,243
  • 1
  • 26
  • 55

4 Answers4

12

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.

Mrchief
  • 75,126
  • 20
  • 142
  • 189
  • Thanks for the westciv link. Reading it now. – Wodin Jul 06 '11 at 07:44
  • 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. – Wodin Jul 07 '11 at 16:37
  • 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. – Mrchief Jul 07 '11 at 16:40
3

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.

Community
  • 1
  • 1
Brad Christie
  • 100,477
  • 16
  • 156
  • 200
  • `page-break-inside` is not supported by most broswers, only Opera has full support for it. – Mrchief Jul 05 '11 at 17:11
  • 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 Jul 06 '11 at 07:43
  • `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 Jul 06 '11 at 17:05
  • In Chrome it seems page-break-inside only works with "block" elements. A workaround could be to use a
    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).
     – vicenteherrera Sep 11 '13 at 13:55
  • 1
    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. (https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside) It works fine for me in recent Firefox. – ASL Sep 26 '16 at 16:02
1

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:

Community
  • 1
  • 1
DoctorDestructo
  • 4,166
  • 25
  • 43
  • This looks promising, thanks. Not sure when I'll get a chance to have a proper look at it, though. – Wodin Apr 02 '15 at 10:47
0

To avoid printing split cells on Safari:

tr
{
    display: block;
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid; 
}
Flavien Volken
  • 19,196
  • 12
  • 100
  • 133
  • 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. – Wodin Aug 08 '13 at 16:18
  • 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](http://www.w3schools.com/cssref/pr_print_pagebi.asp). 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. – Flavien Volken Aug 09 '13 at 13:37
  • 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`. – Wodin Aug 10 '13 at 07:11
  • This messes with rows representation. – vicenteherrera Sep 11 '13 at 13:55
  • 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 Oct 03 '13 at 10:02