-1

The images do my question more justice than my explanation.

But I want to add another table after the height of the table prior exceeds a certain HEIGHT not a certain amount of rows.

This is not for a WEBSITE. It's to use HTML to generate tables for a certification spreadsheet to print out as a PDF. Sorry for the poor explanation.

BEFORE AFTER

jkd
  • 126
  • 8
  • Then how are you measuring height? – AbraCadaver Feb 21 '17 at 22:21
  • Here's a good example of row count change on a table. http://stackoverflow.com/questions/9776240/listening-for-table-rows-count-change – Roe hit Feb 21 '17 at 22:22
  • height isn't really a thing on the web since browsers just scroll as needed. About the only accurate way is use CSS to set a max height for your result rows, then end/start a new table when X results have displayed – Duane Lortie Feb 21 '17 at 22:31
  • Adding another table with the same columns will most likely result in columns not being perfectly aligned in all browsers. No matter how I look at this, I don't see how someone could ever convince me this has the potential of adding extra value to user experience. – tao Feb 21 '17 at 23:23
  • @AndreiGheorghiu it's to create a certification layout for potential employees at the company I work for. Using HTML to design it, and saving the web page as a PDF to print. – jkd Feb 22 '17 at 03:23
  • @AbraCadaver I explained this extremely poorly, I know... the TABLE would have a maximum height, but each row would be able to handle two to three lines of text. – jkd Feb 22 '17 at 03:26

1 Answers1

1

In order to achieve the intended result, you should use print units for your elements: em, cm, mm, in, pt, pc & % for print layout and screen units em, px, % & rem for screen layout.

Full documentation here.

You could (and should) express specific display rules and units for each media type in appropriate media queries: 

 @media print {
   /* print rules and units here */ 
 }

 @media screen { 
   /* screen rules and units here */ 
 }

With the above tools you can control the pagination of your form elements on print media without having to create unnecessary breaks in the screen layout.

I understand from your comments you are displaying forms. My recommendation is not to use <table> elements for layout (unless you are displaying tabular data).

tao
  • 82,996
  • 16
  • 114
  • 150
  • Yes I completely agree regarding using elements unless displaying tabular data, which is the case for this. I appreciate your help. Thank you!
     – jkd Feb 22 '17 at 14:02
  • 1
    @johndev you can wrap your "pages" in some `
    `s that do not do anything in `screen` but on `print` they make a nice border and set the size of the elements. This is how print from web is done normally.
     – tao Feb 22 '17 at 14:04