ページを印刷しようとしています。そのページで、テーブルに背景色を設定しました。Chrome で印刷プレビューを表示すると、背景色のプロパティが適用されません...
そこで私はこのプロパティを試しました:
-webkit-print-color-adjust: exact;
しかし、まだ色は表示されません。
.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>
ベストアンサー1
CSS プロパティはprint-color-adjust: exact;適切に機能します。
ただし、印刷用の正しい CSS があることを確認するのは、多くの場合難しいことです。 発生している問題を回避するために、いくつかの方法があります。 まず、すべての印刷 CSS を画面 CSS から分離します。 これは、およびを使用して行われ@media printます@media screen。
多くの場合、追加の CSS を設定するだけでは@media print不十分です。印刷時に他のすべての CSS も含まれるためです。このような場合、印刷ルールが非印刷 CSS ルールに自動的に優先されるわけではないため、CSS の特殊性に注意する必要があります。
あなたの場合、 はprint-color-adjust: exact機能しています。ただし、background-colorと色の定義は、より詳細度の高い他の CSS に負けています。
ほとんどすべての状況での使用を推奨するわけではありません!importantが、次の定義は適切に機能し、問題を明らかにします。
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
print-color-adjust: exact;
}
}
@media print {
.vendorListHeading th {
color: white !important;
}
}