我明白你遇到的困扰——明明用了媒体查询隐藏屏幕用的表格，但打印时还是留下空白，这确实很烦人。让我帮你分析原因并解决这个问题：

为什么会出现空白？ #

你当前的问题大概率是因为：

• 你只隐藏了表格元素，但包含表格的.stylish_table容器被插件添加了固定高度、margin/padding等样式，打印时即使表格隐藏了，这个容器依然带着这些样式占据空间，导致空白。
• 或者你的display:none规则优先级不够，被插件的内联样式或更高优先级的CSS覆盖了，元素其实没真正隐藏。

解决方案一：彻底隐藏整个屏幕用容器 #

最稳妥的方式是把屏幕用的表格和它的容器一起隐藏，而不是只隐藏表格。调整你的HTML结构和CSS：

调整后的HTML

<!-- 仅屏幕显示的表格容器 -->
<div class="screen-only">
  <div class="stylish_table">
    <table>
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>
</div>

<!-- 仅打印显示的表格 -->
<div class="print-only">
  <table>
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

优化后的CSS

@media screen {
  .screen-only {
    display: block !important;
  }
  .print-only {
    display: none !important;
  }
}

@media print {
  .screen-only {
    display: none !important;
    /* 额外保险：清除所有可能占空间的属性 */
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  .print-only {
    display: block !important;
    /* 可以给打印表格加一些适配样式，比如宽度100% */
    width: 100%;
  }
}

解决方案二：修复原有样式的优先级问题 #

如果你不想改HTML结构，那就要确保打印时的隐藏规则优先级足够高，同时清除.hide_for_print元素及其父容器的占位样式：

@media print {
  .hide_for_print {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  /* 同时处理包含它的.stylish_table容器 */
  .stylish_table.hide_for_print {
    display: none !important;
  }
}

@media screen {
  .hide_for_screen {
    display: none !important;
  }
}

额外注意事项 #

1. 强制刷新页面：浏览器有时候会缓存打印样式，修改CSS后按Ctrl+F5刷新页面再看打印预览。
2. 检查插件样式：打开浏览器开发者工具，查看.stylish_table的样式，确认打印时这些样式被正确覆盖。

这样修改后，打印时屏幕用的元素会完全从布局中移除，不会留下任何空白，同时打印用的表格能完整展示所有数据并跨页打印。

内容的提问来源于stack exchange，提问作者user2301765