我使用twitter-bootstrap作為我的HTML的主要樣式。

我有一個生成的表格(來自ember應(yīng)用程序),表格的每個單元格都有一個背景色來表示某個狀態(tài)。顏色是用類選擇器設(shè)置的。

這項工作對于屏幕來說非常完美，但是當打印時，我只得到白色背景色，因為bootstrap定義了以下內(nèi)容:

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

我的html看起來像這樣:

<table class-"table table-condensed>
   <tr>
     <td class="bg-color1>Content</td>
     <td class="bg-color2>Content</td>
   </tr>
</table>

我的css看起來像這樣:

.bg-color1 {
  background-color: #ababab;
}
.bg-color2 {
  background-color: #bababa;
}
@media print {
 .bg-color1 {
   background-color: #ababab;
 }
 .bg-color2 {
   background-color: #bababa;
 }
}

我用了還是不行！在印刷媒體類別描述中很重要。此外，如果我添加以下內(nèi)容來“撤銷”bootstrap中的td th設(shè)置，它將不起作用，因為這將超過我的類設(shè)置，所以打印時我仍然沒有得到顏色

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

使用bootstrap的類選擇器打印時，似乎沒有辦法獲得彩色背景。有人對此有解決辦法嗎？

哦，是的，只是注意到一些東西... CSS有一個令人頭疼的偏好，你的選擇樹越大，它的優(yōu)先級越高。有關(guān)更多信息，請參見CSS規(guī)范。

舉個例子， 表& gttd優(yōu)先于td

在Bootstrap的CSS中，td被選為。表td，但是你的選擇器只是。背景色1或。背景色2

有兩種方法可以解決這個問題。

移開！重要的從Bootstrap的CSS和保持！在你的CSS中很重要 增加選擇器的長度，比如。桌子。背景色1 我沒有證據(jù)證明這一點，但這是我注意到的。

如果用戶在他們的打印設(shè)置中關(guān)閉了“打印背景顏色和圖像”，沒有CSS會覆蓋它，所以總是要考慮到這一點。這是默認設(shè)置。一旦設(shè)置好了，它就可以打印背景顏色和圖像，你就可以使用了。它存在于不同的地方。在IE9beta中，可以在打印->頁面選項中的紙張選項下找到它。在FireFox中是在頁面設(shè)置->[格式& amp選項]選項卡下的選項。

可能有幫助:

body {
  -webkit-print-color-adjust: exact;
}