div, table and page-break-inside.

[rayvd]

I have a page one which I have multiple tables, each containing multiple, but not always the same amount of rows. I want to ensure that when I print this page out (printer or viewed via Print Preview) that no table runs onto two pages. That is, if Page 1 can hold Tables 1 & 2 and part of Table 3, then Table 3 should get pushed onto the next page automatically when printed.

I understand that I can use the page-break-inside attribute on block-level elements, so I surround each <table></table> block with a <div></div> block (also tried adding the attribute on the table element with no luck).

I have some very basic CSS:

div {
 page-break-inside: avoid;
 border: 1px solid blue;
}

This correctly places the border, but seems to have absolutely no effect as to creating a page break correctly. I still have a table that is running onto multiple pages instead of being pushed to the next page.

Am I asking the impossible? I have a bad feeling that since none of the block level elements inside the table (tr, td, etc) are actually spanning multiple pages that this is why I am seeing what I am seeing.

A note: If I use page-break-before: always in my div, then each table is displayed on its own page. But this is not exactly the behavior I'm wanting.

Any ideas?

[Robin_reala]

Which browser are you using? A quick look around the net shows that both Gecko (fx, mozilla, netscape etc) and IE lack support for page-break-inside.

[rayvd]

Really? Shoot. Well that's it then as I am using Firefox 1.5.1.

Thanks, you've saved me a lot of time :)