[解決済み】印刷プレビューで背景色が表示されない。

質問

あるページを印刷しようとしています。そのページでは、テーブルに背景色を付けています。 クロームで印刷プレビューを表示しても、背景色のプロパティが反映されないのですが...。

そこで、このプロパティを試してみました。

-webkit-print-color-adjust: exact; 

が、まだ色が表示されない。

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>[email protected]</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

解決方法は？

ChromeのCSSプロパティ -webkit-print-color-adjust: exact; は適切に動作します。

しかし、印刷用の正しいCSSを確認することは、しばしば厄介なことがあります。あなたが抱えている困難を避けるために、いくつかのことを行うことができます。まず、印刷用のCSSを画面用のCSSから分離してください。これは @media print と @media screen .

を設定するだけで、多くの場合 @media print CSSだけでは十分ではありません。印刷時には他のCSSもすべて含まれるからです。このような場合、印刷ルールが印刷以外のCSSルールに自動的に勝てるわけではないので、CSSの特異性を意識する必要があります。

あなたの場合 -webkit-print-color-adjust: exact が動作しています。しかし、あなたの background-color と色の定義が、より高い特異性を持つ他のCSSに負けてしまっている。

一方、私は しない を使用することを推奨します。 !important は、ほぼどのような状況でも、次の定義が正しく機能し、問題を明らかにします。

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

以下は フィドル (そして 埋め込み 印刷プレビューを容易にするため）。