CODEWITHSUNDEEP
javascripthtml
Darklizard
Darklizard

Reputation: 377

Pagebreaks for tables

This is the structure of user's HTML input:

<body>
 <div id="main">

  <div id="extra">
   <table></table>
  </div>
   <div id="extra">
   <table></table>
  </div>
  <div id="extra">
   <table></table>
  </div>
  <!-- more divs --> 

 </div>
</body>

What I need to do is to display this structure divided in pages, like Microsoft Word does. Due to the unpredictable size of the content (tables), part of a table could possibly overflow from a page after data's been uploaded, so this overflowed part should move to the next page.

See this sketch:

content divided in pages

Upvotes: 2

Views: 99

Answers (1)

Jeroen
Jeroen

Reputation: 63729

Your question seems to come down to (rephrased):

How do I detect where a page-break will be in print media, and adjust my screen media CSS or even HTML accordingly?

As far as I know, you cannot quite do this.

The "easy" workaround would be to guesstimate where page breaks occur and insert needed classes / elements at those locations.

A "harder" but little more finegrained solution would be to use Javascript to parse the DOM and do a slightly more precise guesstimation.

In any case, you can't be 100% precise (as in Word), because there are outside factors that you can't see or control from within your page, like the printer's properties, browser settings on whether or not to print headers and footers, etc.

Upvotes: 1

Related Questions