page break not appearing correctly

Question

I have created a simple print style sheet and what is happening is that when the text reaches the end of the first page, instead of flowing to the next page, like in word, the text seems to be splitting and half is on the first page and the next half is on the second page. Is there a way with css to correct this. I have done a grab to illustrate the problem, Thanks

css

body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #ff0000; }
table { border: none; }
.noPrint { display:none; }

enter image description here

Answer 1

You can use the following to force a page break before a specific element:

#yourElementID {page-break-before:always;}

Edit:

I had assumed there was some other elements above your table, but looking again, you may just be printing reams and reams of table data? I am not sure how to solve this if that is the case.

• bollo: diagonalbatman, your assumption is correct. The results that go into the printed page are dynamic so are as such out of my control. However, is there not a way to limit the amount of data then force a page break? Thanks
• diagonalbatman: I suppose this could go down to how you present your output. For example, you could calculate how many rows can fit into a page, then use an nth child selector reference.sitepoint.com/css/pseudoclass-nthchild on every X rows of data in your table ans stick the page break code in there? I dont know how well this will work however (if at all) just thinking out loud
• bollo: thanks for input. suppose another way to go would be to do an if statement in php and for every 15 records perhaps do something along the lines of: if($i > 15) { echo '<br style="page-break-before:always;">'; }
• diagonalbatman: You could do - but not sure how a <BR> inside tabluar elements is rendered by the browser - it may cause more issues.