css - 打印样式表似乎不起作用

Question

我编写的打印样式表似乎不起作用。我在我一直使用的所有浏览器中测试了它，但它没有按预期运行。据推测，该代码将仅显示所显示表格的打印 View 。导航栏、页眉、页脚、按钮和所有其他内容都不应该可见。

这是我制作的打印样式表:

 @media print{

   header nav, footer{
    display:none;
   }

   .clearfix, #sidebar, .columns btn-group{
    display:none;
   }

   @page{
    margin: 0.5cm;
   }

   body {
    font: 12pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
   }

 }

但是当我打印页面时，它仍然显示不需要的元素，如图所示: 1st image

虽然假设只打印页面这部分的表格: tables

Answer 1

@media print{

   header nav, footer{
    display:none !important;
   }

   .clearfix, #sidebar, .columns btn-group{
    display:none !important;
   }

   @page{
    margin: 0.5cm !important;
   }

   body {
    font: 12pt Georgia, "Times New Roman", Times, serif !important;
    line-height: 1.3 !important;
   }

 }

然后在您不希望出现在打印版本中的 HTML 中添加 class='noprint'(或将 no-print 类添加到现有类声明中)，例如您的按钮。我让它与“noPrint”而不是“noprint”(小写)一起工作。