web-dev-qa-db-fra.com

Imprimer la couleur d'arrière-plan d'un tableau HTML avec Bootstrap

Si j'utilise Bootstrap table class sur une table, l'aperçu avant impression n'affiche pas la couleur d'arrière-plan pour tr.

Mon code

<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>

À l'écran, tout est rouge, mais dans l'aperçu avant impression, seul l'élément div est rouge.

Si je supprime la classe table, tout fonctionne (sauf que j'ai besoin du style de table).

Ma configuration: IE11 et Windows 7.

Yat-il un truc pour imprimer la couleur de fond?

Remarque: Le double indiqué ( problèmes d'impression CSS @media avec couleur d'arrière-plan; ) n'est pas le problème ici, mes paramètres sont vérifiés pour imprimer les couleurs d'arrière-plan. De plus, je peux imprimer des couleurs pour plusieurs autres éléments.

Réponse :

Grâce aux commentaires de @Ted, j'ai remplacé le style td par la classe table:

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

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

Bootstrap définit explicitement le fond en blanc pour l’impression - c’est dans leur CSS: 

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

Écrivez votre dérogation comme la leur et vous devriez être prêt à partir.

21
Ted

Il n'y a pas. Par défaut, ils n'impriment pas. C'est une option de navigateur qui ne peut pas être surmontée par CSS/JS, etc.

Il IS cela, qui force les couleurs ... prétendument en Chrome

-webkit-print-color-adjust

Qui est répertorié comme support BUGGY UNIQUEMENT pour chrome, et non pris en charge par les autres navigateurs.

1
Joe Swindell

En ajoutant à la réponse de @ Ted, ce qui suit remplacera la règle de bootstrap background-color !important par défaut:

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

Je pense que la meilleure façon est d'utiliser un sélecteur css plus spécifique

<style>
@media print {
   .table td.cell {
     background-color: blue !important;
   }
}
</style>

<table class="table">
  <tr>
    <td class="cell">TR 1</td>
  </tr>
</table>
0
pszafer

J'ai utilisé une rangée d'en-tête de tableau et l'ai stylé comme ceci

.table th {
        background-color: #2D3347 !important;
        color: #fff !important
    }
0
tfa