Preventing Page Breaks in a Table When Printing

Question

I have a page that I'm trying to set up for printing. This page contains a large number of individual tables. The tables are of varying size but, in general, I can fit 2.5 to 3 tables on each page. I'd like to be able to prevent the tables from being broken by a page break. Any idea how I can accomplish that?

I tried this:

.reportTable {
    page-break-inside: avoid;
}

Unfortunately, page-break-inside only seems to be supported in Opera (according to W3Schools - I verified that this doesn't work in Firefox 4.0.1).

I can do this to force a page break before after every single table:

.reportTable {
    page-break-after: always;
}

This works to insert the page breaks and seems to be supported in all major browsers, but it leaves me with tons of wasted space on the printed documents (roughly half of each page is blank). I really only want a page break if the entire next table won't fit on this page.

I know that I have users utilizing Internet Explorer, Firefox, and Safari so I'd really like to support those as much as possible. Finding something that would also work in Chrome and Opera would be a very nice bonus.

Any ideas?

Solution 1

I've also been looking for an answer to this. The closest I came is to knowing approximately how many lines of output would fit on a page, then calculating how many lines of output the page had. In your case: 1) figure out how many lines of output you can fit on a page. 2) keep track of how many lines you've used already by displaying your first table. 3) calculate how many lines table 2 will take. Add it to table 1's lines and see if you're still below your approximate threshold. If you are, display the table, if not, put a div down with the page-break:always in it to force a new table.

This would give you approximately what you are looking for, but it won't be perfect. every once and a while, you'll have a table that "could" have fit on the previous page, but just didn't quite make the cutoff because you have to be on the low side of estimating how many lines fit on a page.

I haven't however figured out a way to facter in if the content inside a cell or something like that will wrap around into a new line when smushed into a printout page.

Hope that sparks an idea for you.

Solution 2

to fix this just make #table{page-break-after:auto;}

Solution 3

At present, there seems to be no way to force the browsers that don't support page-break-inside: avoid to do so.

However, since you can fit 2.5 to 3 tables on each page and prefer not to print just a single table using page-break-after: always;, you could opt to insert a special div that forces a page break after every two tables.

So you would include <div class="pageBreak"></div> and hide it for the screen but display it for printing. And you would give it a style of page-break-after: always;. In this way, you get at least two tables per page.

Another suggestion would be to let the user decide whether or not he/she wants to print one table per page or as many as can fit (with some possibly being split over the pages). You can toggle a checkbox to add the page-break-after: always; style to the tables.

Comments

[microspino]

Coul you use some JavaScript?

[Pierre]

@McGlone: If you're still using w3schools as a reference, please check out developer.mozilla.org. It's a much more detailed and comprehensive reference for all things web.

[Andrew Dunkman]

This isn't true at all. The browser outputs a postscript file which is sent to the printer. When generating the ps file, the browser chooses how to layout the pages. The only quirk is with margins -- some printers cannot or will not print in certain areas of the page.

[Christophe]

-1 there's an example in the question itself. Apparently it is only implemented in Opera, but at least it shows that you have some control from the browser.

[Pierre]

-1 for spouting utter bumbling rubbish. Where do you get this stuff?

[Pow-Ian]

I agree with this method, but cross browser support is very difficult. I am currently doing something like this but because I am supporting IE, Safari, Firefox and Chrome, I found that I needed to take a middle of the road row count, that does not look great in any of the browsers but fits the way I need it to. oddly, at least on windows, this is one place where IE shines.