打印带有引导的HTML表格背景色

Question

如果我在表中使用Bootstrap table类，则打印预览不会显示tr的背景色。

我的代码

<head>
  <!-- All Bootstrap's stuff ... -->

  <!-- My custom style -->
  <style type="text/css">
    @media print {
      .bg-danger {
        background-color: #f2dede !important;
      }
    }
  </style>
</head>
<body>
  <div class="bg-danger">
    <td>DIV</td>
  </div>

  <table class="table">
    <tr class="bg-danger">
      <td>TR 1</td>
    </tr>
    <tr class="danger">
      <td>TR 2</td>
    </tr>
    <tr style="background-color: #f2dede !important;">
      <td>TR 3</td>
    </tr>
  </table>
</body>

在屏幕上，所有的内容都是红色的，但是在打印预览时，只有div元素是红色的。

如果删除table类，一切都正常(除了需要表样式)。

我的配置: IE11和Windows 7。

有什么花招来打印背景颜色吗？

注意：表示的复制(CSS @media print issues with background-color;)不是这里的问题，我的设置被选中以打印背景色。另外，我还可以打印其他几个元素的颜色。

答案:

由于@Ted的评论，我为table类高估了table样式：

<style type="text/css">
  @media print {
    .bg-danger {
      background-color: #f2dede !important;
    }

    .table td {
      background-color: transparent !important;
    }
  }
</style>

Answer 1

引导显式地将背景设置为白色以供打印--这在它们的CSS中：

@media print { 
    .table td, .table th { 
        background-color: #fff !important; 
    } 
}

像他们一样写你的超写程序，你应该准备好了。

Answer 2

根本就没有。默认情况下他们不打印。它是CSS/JS等无法克服的浏览器选项。

这就是迫使colors...allegedly在Chrome中使用的原因

-webkit-print-color-adjust

它只支持chrome，而在其他浏览器中不支持。

Answer 3

添加到@Ted的答案中，以下内容将覆盖默认的引导background-color !important规则：

@media print {
    table tr.highlighted > td {
        background-color: yellow !important;
    }
}