using page-break-before or after

liunx

Guest
I am trying to control the output from a dynamicly created report when it is printed. I am using ColdFusion to generate the page. Each record requires 4 rows to display all of the data. There is a fifth row that contains a <hr> tag to help make it easier to read.

Of course, there is alwas one record that gets split up by the page brake, I have tried putting page-break-before and after in the last <tr> before the end of the loop and set it to auto, I tried putting it in the <hr> tag and I also created a class in an @ media print style sheet. None of them worked.


suggestions please.

tia
JAfter perusing w3schools.com ( <!-- m --><a class="postlink" href="http://www.w3schools.com/css/pr_print_pagebb.asp">http://www.w3schools.com/css/pr_print_pagebb.asp</a><!-- m --> )

I found something out. It's best to use page-break-before: always; for a table. That way, if the table should overlap two pages by default, it will move the table to the next page, and then be able to print the whole table on one page. The site gave the following guidelines:

"Note: You can not use this property on absolutely positioned elements."

"Note: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders."

I've never played around with this property yet myself, but I'm going on what I've found at <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w -->. It's a great reference for CSS 1, 2 (positioning), and 3 (print).

You may also want to include page-break-inside: auto;

That just tells the browser that it CAN break the table up between two pages. Depending on which order you write the page-break-before and page-break-inside properties will determine which one take precedence over the other. That will com in handy if you have a table that spans more than one page, and you may need to break up the table into two pages.

You also may want to try <!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/current-work/">http://www.w3.org/Style/CSS/current-work/</a><!-- m --> for info on the current work on CSS3.
 
Back
Top