从浏览器打印时消除隐藏元素的空白

Question

我的项目中有一个报告页面，在javascript插件的帮助下显示了一个时尚的表格。以下是示例代码......

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

并且javascript触发器是......

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

这是一个时尚的桌子，它有一个固定的高度，数据可滚动，以获得舒适的视野。现在，当我想要打印此页面时，该页面的打印方式与浏览器中显示的内容相同。但我希望只打印表格，其所有数据都会分布在多张纸上。

所以我搜索了“在打印时停止javascript触发器”的方法，以便表格不会被设置样式并打印正常的。但我找到的解决方案都没有奏效。所以我采用了一种方法来生成相同的表两次并编写媒体查询来隐藏打印中的一个。

我的意思是以下......

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

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

在css中我添加...

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

它按预期工作但有一个问题。当我打印它时，正在隐藏该元素的空白空间。无论我把它放在哪里，hide_for_print都隐藏在打印中，但是打印出一个空的空白区域。

如何隐藏打印并避免留空？