Controlling Page Breaks on Print Pages with .CSS

[rockyroad]

Hello,

I am trying to gain control over the printed version of an HTML page. The HTML is actually output from a SQL query using ColdFuison... for a report. I am using as much valid xhtml and .CSS as possible. However, since the output data is exactly that - columnar data - I am using a table for this. What I intend is simply to have the .CSS such that the page will break at the end of the tables, rather than in the middle and continue on the next page. Here is some sample pseuso code...

<div class="OutputDiv">
<cfoutput>(loop)
<h1>#Variable#</h1>
<h2>#AnotherVar#</h2>
<table>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>#Column1#</td><td>#Column2#</td></tr>
</table>
</cfoutput>
</div>

...
and the print .css ...

  .OutputDiv table,
 {
 margin-left: 12px;
 margin-right: 12px;
 margin-bottom: 10px;
 background-color:#C0C0C0;
 width: 97%;
 border: 1px #C0C0C0;
 page-break-inside: avoid;
 }

 .OutputDiv
 {
 background-color: #ffffff; border:1px solid; margin-bottom:20px;
 width: 100%;
 margin: 10px;
 padding-bottom: 5px;
 page-break-after: always;
/* I am using this to maintain a page break between recordsets - and that is working great! */
 }

...so what can be done? as it is now, the printed page will break right in the middle of one of these pages.



Any ideas?

Thanks!

RR