Home Eliminating whitespace from hidden elements while printing from browser
Reply: 0

Eliminating whitespace from hidden elements while printing from browser

user2301765
1#
user2301765 Published in 2018-01-13 05:46:04Z

I have a report page in my project where am showing a stylish table with the help of a javascript plugin. Here is the sample code...

 <div class="stylish_table">
   <table>
      <thead></thead>
      <tbody></tbody>
   </table>
 </div>

and the javascript trigger is...

 $('.stylish_table table').stylishTable();

this is generating a stylish table which has a fixed height and the data is scrollable for a comfortable view. Now when i wanted to print this page the page also printing as same as it looked in the browser. But i want only the table to be printed with all its data spreading over many sheets.

So i searched ways to "stop the javascript trigger when it is printing" so that table will not get styled and print the normal one. But none of the solutions i found worked. So i followed a way to generate the same table twice and write media query to hide one on print.

I mean the following...

 <div class="stylish_table hide_for_print">
   <table>
      <thead></thead>
      <tbody></tbody>
   </table>
 </div>

   <table class="hide_for_screen">
      <thead></thead>
      <tbody></tbody>
   </table>

in css i add...

  <style>
     @media print
     { .hide_for_print{ display:none; } }
      @media screen
     { .hide_for_screen{ display:none; } }
  </style>

It is working as expected but with one issue. When i print it is making the empty space of that element which is being hide. whatever i put inside hide_for_print is hiding from print but a empty blank space is printing instead.

How do i hide from print and also avoid the blank space ?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.331095 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO