Is there a way to create page breaks in HTML, based on page or table height?

[benphp]

I have a report that lists one to dozens of records, and I want to have a header and footer display on every printed page. The only way I can think of to do that is to somehow determine the height of the content in relation to an 8.5x11 sheet of paper - or is there another way?

 

Since I'm not using monospace type, the report will vary if I just count characters.

 

The report is displayed in a table format - is there any way to determine the table or cell height on the fly?

 

 

[BlueSkyIS]

if the report needs to be formatted consistently when printed, you might want to consider output to PDF.

[DavidAM]

I recently built an internal application that shows several tables on a single web-page. Since this is an INTERNAL application, I did not test any of the following in ANY browser other than the one I use (FireFox). So, this works in FireFox, but I don't know about any other browsers.

 

1) If an HTML table is longer than the printed page, the "<THEAD>...</THEAD>" section is repeated on each page. HTML also has a "<TFOOT>" (I believe) that may do the same thing. I did not use it, so I can't say if it works.

 

<TABLE border=1>
  <THEAD>
    <TR><TH colspan=2>Hours</TH><TH>Job</TH><TH>Sat</TH><TH>Sun</TH>
    	<TH>Mon</TH><TH>Tue</TH><TH>Wed</TH><TH>Thu</TH><TH>Fri</TH>
    	<TH>Total</TH><TH class="ot">Reg</TH><TH class="ot">OT</TH>
    </TR></THEAD>
  <TR>
TABLE DETAIL GOES HERE
  </TR>

 

2) To force a page break at a specific spot (for me each table needed to start on a new page). I added a block element (I used "<H2>") to the webpage. I assigned a CSS class to this element so that it is NOT displayed on the screen; and another CSS class so that it causes a page break.

 

<H2 class="MDnoScreen pageBreak">Hours Report: Jan 15, 2011 - Jan 28, 2011</H2>

 

/* CSS Page Break for Printing */
.pageBreak { clear: both; page-break-before: always; }

/* SCREEN */
@media screen {
.MDnoScreen {display: none;}	/* Do not show on screen (it is for the printer) */

 

I hope this helps. You can google for the "page-break-before" attribute and for the THEAD/TFOOT elements for more detail.

 

[benphp]

That's very close to what I'm trying to do. However, you say "If an HTML table is longer than the printed page" - how do you determine that? That's my problem. If I were using courier, I could calculate it, since all the chars are the same size, but if I have a lot of I's or a lot of O's, the size differs significantly, and I can't calculate it - I can only estimate with an 80% accuracy or so.

[DavidAM]

On the display of the web page, the THEAD will appear at the top of the table.  When the page is printed, if the browser decides to split the table across multiple pages, it will print the THEAD at the top of the TABLE on each page.

 

By the way, there is no way you will ever determine the size that the page will be when printed. Firefox (and probably others) gives me the ability to scale the output to however I choose 50%, 80%, 120%, whatever. So, even if you figure the size of your page, you don't know the size of the printout.

 

If you need absolute print formatting, then generate a PDF. If you just want to make a user's printing of your page more friendly, there are some (very few) HTML and CSS elements that will help. It is unfortunate that the HTML specification does not give us more print layout capabilities.

[ale8oneboy]

In the past I've set a limit on the number of rows per page ($max_rows_per_page) and tracked the row count in a counter variable ($row_id). When the row count mod'd by the max pages per sheet ($row_id % $max_rows_per_page = 0), I broke the table and put in a page break (using CSS). Then started the table again. Like above, this was for an internal app. But it worked nicely with Firefox. Just a thought to add.

 

page break example

echo "<p style='page-break-after: always;display:inline;'> </p>";