Solved

page breaks in html table

Posted on 2010-08-23
16
672 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
  • 7
  • 5
  • 2
  • +1
16 Comments
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
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
Comment Utility
#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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
 
LVL 7

Expert Comment

by:kpmartin
Comment Utility
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
Comment Utility
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
Comment Utility
>>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
Comment Utility
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
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 29

Expert Comment

by:Badotz
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>>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
Comment Utility
This helped me understand things a bit better
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Grade "B"? Was I bad?
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 46
Inline input fields - Contact Form 7 5 20
Error viewing ASP page 12 71
Safari SVG Image Problem 1 19
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now