2

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;
   }
}
Will Davis
  • 167
  • 12
  • Have you tried the css property: page-break-after? –  Feb 23 '14 at 02:58
  • @AndrewSchools- Yes I Have. I've pretty much tried page-break-after, before, inside, etc. in every way except for the right way. – Will Davis Feb 23 '14 at 11:52
  • I don't think the `page-break-*` rules work on tables in any browser except Firefox. – toxalot Feb 24 '14 at 01:08
  • You may be interested in http://stackoverflow.com/questions/17761646/how-to-achieve-page-break-in-html-table-for-google-chrome or http://stackoverflow.com/questions/14303178/page-break-doesnt-work-on-google-chrome – toxalot Feb 24 '14 at 01:17

1 Answers1

0

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.

ASammour
  • 865
  • 9
  • 12