La couleur d'arrière-plan n'apparaît pas dans l'aperçu avant impression

Question

J'essaie d'imprimer une page. Dans cette page, j'ai donné une couleur de fond à un tableau. Lorsque j'affiche l'aperçu avant impression dans chrome, il ne prend pas en compte la propriété de la couleur d'arrière-plan...

J'ai donc essayé cette propriété :

-webkit-print-color-adjust: exact; 

mais la couleur n'apparaît toujours pas.

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>zznn@abc.co</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>

Answer 1

Vous pouvez utiliser des styles css en ligne avec !important. Par exemple.

<p style="background:red!important">ABCD</p>

Answer 2

Si vous téléchargez Bootstrap sans l'option "Print media styles", vous n'aurez pas ce problème et n'aurez pas à supprimer manuellement le code "@media print" dans votre fichier bootstrap.css.

Answer 3

J'ai doublement chargé mon fichier source css externe et changé le media="screen" en media="print" et toutes les bordures de mon tableau ont été affichées.

Essayez ceci :

<link rel="stylesheet" media="print" href="bootstrap.css" />

<link rel="stylesheet" media="screen" href="bootstrap.css" />