Jump to content

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


benphp

Recommended Posts

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?

 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>";

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.