Solved

page breaks in html table

Posted on 2010-08-23
16
677 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
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
Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

773 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