Solved

page breaks in html table

Posted on 2010-08-23
16
685 Views
Last Modified: 2012-05-10
Hi. I have a page with complicated html using nested tables. the simple idea of the table is:
<table><tr><td width="50%">
  <table><tr><td>......</td></tr></table>
</td>
<td width="50%">
  <table><tr><td>......</td></tr></table>
</td></tr</table>

The result is 2 columns of data, one aligned perfectly with the other.

The problem is that I need to be able to print this with intelligent page breaks. There are multiple records on each side and I don't want it to break in the middle of the record. (In the attached image, i don't want it break within "benacare" for example' or within "radiology"). But i can't put a pagebreak within any level of the table.

I've inherited this page from a coworker, and don' t really have the liberty to change it much. So I would like to be able to keep the nested table design and still accomplish this. But if I absolutely can't, I can work with a more css angle - using divs instead of tables etc.

I have tried this approach using two divs
"<div style='float:left;display:inline;width:50%;overflow:hidden"
but either I'm not doing it right or it doesn't really work either because it seems to me i still have to completely close the div to insert the page break which kills the design...and i'm back to the beginning.

Any ideas? I'm at a loss. If there's an out of the box design, I would consider that too...please advise.  thanks. sample design
0
Comment
Question by:AlizaN
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 2
  • +1
16 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 33502741
Can you copy the content of the table (columns) to a text file, manipulate things to your liking (correct number of LPP, etc.) and then print from that file?
0
 
LVL 1

Author Comment

by:AlizaN
ID: 33502868
#1 -  I don't know how to manipulate it properly. there isn't a preset number of lines per page that will work and breaking the tables/divs cause problems as described above. so i don't know a good way to manipulate the page. #2, there isn't a preset number of lines per page. it has to know when the record is complete. it has to be intelligent - which means it really has to decided where to put the page break while creating the page and reading from the database. so it has to put the page breaks in "live time".
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33503054
Your most basic problem is that HTML isn't designed for printing.  I don't know of a page break command in HTML.  The browsers create page breaks in their printing routines... after scaling the page image.
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 7

Expert Comment

by:kpmartin
ID: 33503125
Add this class to your css:
.breakhere {
      page-break-before:always
      }

Then in your HTML add:

<div class=breakhere></div>
before the closing </div> or </table> as appropriate

The params avail for page-break are:
auto, always, avoid, left, right and inherit

You may have to tweak a little to get it to work properly, see here for more info:
http://www.w3schools.com/CSS/pr_print_pageba.asp
0
 
LVL 1

Author Comment

by:AlizaN
ID: 33503137
i guess i should have been clearer. i am using the divclass=breakhere code with exactly that class/style.  i just don't have a good place to place the div because that div cannot be placed within a table.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33503165
>>You may have to tweak a little to get it to work properly

Now THAT is an understatement. All HTML knows is when it "sees" that CSS rule, it page breaks. But that is ALL it knows. It does not know:

1. Lines per page
2. Lines remaining
3. Current line
4. Page number
5. Page "x" of "y"

there is only one way for HTML to "know" this: YOU must tell it. And that means processing the data BEFORE you even THINK of printing it.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33503177
I'm not saying it cannot be done - I wrote just such a "report writer" back in '01 or '02 - but it is not as simple a task as you might wish.
0
 
LVL 1

Author Comment

by:AlizaN
ID: 33503182
Badotz: right. Any idea how i properly insert a page break and still keep the structure of the page? Or can you tell me this definitely isn't possible?
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33503214
You will regret trying to do this in HTML. Pass the info back to the server for processing (via Ajax, perhaps?) and then flush it back to the browser as text (as though it came from a text file). You can insert blank lines in the text, page numbers, etc.

There is no way to get the format you want - well, there might be a way, but that path is not one I would trod - so do the Right Thing and create the output on the server.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 33503261
I agree with @Badotz, you need a programming language to do the things that are needed and HTML isn't a programming language.  It could be done in PHP or ASP but you won't have it done by the end of today.
0
 
LVL 1

Author Comment

by:AlizaN
ID: 33503314
i am doing it in asp - writing out the html while reading a recordset and formatting it as i go along. i addresed the question as html because if i knew how to do it in html i would know how to do it in asp. but yes, i agree with you as i wrote a few posts above:
" it has to know when the record is complete. it has to be intelligent - which means it really has to decided where to put the page break while creating the page and reading from the database. so it has to put the page breaks in live time."

but none of this really helps- i still can't figure out how to do it.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33503325
You *might* be able to do it in the browser with JavaScript, but I know I didn't have that luxury when I wrote my generator way back when...let me see if I can find any of that code; it might take a muniute or 60...
0
 
LVL 7

Expert Comment

by:kpmartin
ID: 33503360
Good points, sorry for the bad advice.   I've always used that in a PHP script and had the page break before a return or $xrec.  It won't work in a table as you stated...
0
 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 33511282
>>i am doing it in asp - writing out the html while reading a recordset and formatting it as i go along.

Then you are halfway there. You can count the nmber of lines per page, figure out the page number and where to insert the page breaking HTML.

This CSS defines the page-breaking rule:

<style type="text/css">
.pageBreak
{
    page-break-before:always;
}
</style>

You will have one TABLE for each "page", instead of a single TABLE for all of your content. Wrap each TABLE in a DIV with an ID of "page_n", where "n" is the actual page number:

<div id="page_1" class=""pageBreak"" />
    <table id="tbl_page_1">
    <!-- Your HTML content goes here -->
    </table>
</div>

That should be enough to get you started, eh?
0
 
LVL 1

Author Closing Comment

by:AlizaN
ID: 34401425
This helped me understand things a bit better
0
 
LVL 29

Expert Comment

by:Badotz
ID: 34401579
Grade "B"? Was I bad?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question