HTML/CSS - Table Page Break Not Working (Print) - php

Question

I have tried numerous different page-break rules on a table element and I've exhausted myself.
Project location:
https://github.com/xremainnameless/lead_tracker
The table I'm trying to print is located on 'leads_queue_u.php' inside the '#lead_wrapper_u' div. I dynamically create the table using 'scripts/fill_all_leads_u.php' and I print the table using the custom print button on the document.
No matter which css rules I've applied, I can't seem to force the page breaking. I deleted all of my attempts, as to show cleaner code. Here is a snippet of the #print CSS:
#media print {
#page {size: landscape;}
body * {visibility: hidden;}
#lead_wrapper_u, #lead_wrapper_u * {visibility: visible;}
#lead_wrapper_u button {visibility: hidden;}
#lead_wrapper_u {
position: absolute;
left: 0;
Top: 0;
}
}

Answer 1

I always advice to not use the print button in the browsers (ctrl + p); because each browser has it's own preferences. You can depend on other frameworks to print the pages into different formats. e.g. fpdf framework.
But, if you insist to use the browsers button to print, you can replace all the tables, with divs; Since divs are always break in the end of the page, without distortion the layout.
for example, if you have this code:
<table>
<tr>
<td>Name</td>
</tr>
<tr>
<td>City</td>
</tr>
<tr>
<td>DOB</td>
</tr>
</table>
.
.
.
Then, you have to remove the table elemnts, and replace by a div, like this:
<div style = "border:black solid;">
<div style = "border:solid black;">Name</div>
<div style = "border:solid black;">City</div>
<div style = "border:solid black;">DOB</div>
</div>
.
.
.
This will make sure that each div will break to next page, without looking like it's been cut.