Imprimer HTML de table couleur d'arrière-plan avec Bootstrap

Si j'utilise Bootstrap table classe 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>

Sur l'écran, tout est rouge, mais sur aperçu avant impression uniquement le div élément est rouge.

Si je supprime le table classe, tout fonctionne (sauf que moi j'ai besoin de style de tableau).

Ma configuration : IE11 et Windows 7.

Est-il un truc pour imprimer la couleur d'arrière-plan ?

Remarque: indiqué en double (CSS @media print problèmes avec la couleur d'arrière-plan;) n'est pas la question ici, mes paramètres sont vérifiés pour imprimer les couleurs d'arrière-plan. Aussi, je peux imprimer en couleur pour plusieurs autres éléments.

Réponse :

Grâce à @Ted commentaires, je surdéfini td style pour table classe :

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

    .table td {
      background-color: transparent !important;
    }
  }
</style>
Mon IE des paramètres pour l'impression d'arrière-plan sont déjà cochée.
Bootstrap définit explicitement un arrière-plan blanc pour l'impression-c'est dans leurs CSS: @media print { .table td, .table th { background-color: #fff !important; } }. Écrivez votre remplacement comme le leur.
Ok je ne peux pas répondre à ma question maintenant...Mais @Ted votre solution fonctionne !! Je surdéfini tr mais je ne pense pas que pour td. Merci !!! J'ai ajouté .table td { background-color: transparent !important; } dans le print section.
Pas de soucis, content d'avoir pu aider 🙂
voulez convertir votre commentaire une réponse? Réouverture de la question 🙂

OriginalL'auteur JTE | 2015-04-10

  1. 20

    Bootstrap définit explicitement un arrière-plan blanc pour l'impression-c'est dans leurs CSS: 

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

    Écrire votre remplacement comme le leur, et vous devriez être bon d'aller.

    Donc, la meilleure solution est de modifier le fichier de bootstrap et de supprimer la !important (partout! - il ne doit jamais être utilisé en cas de besoin - pas de " gee, si vous suivez mon style puis changer pour une raison quelconque est mauvais, donc je vais vous forcer à l'utiliser !important partout!) - Ou de l'option 2, à l'utilisation !important partout dans votre code pour remplacer leur utilisation de plus de !- Il Important? Est-il un simple fichier que je peux tout simplement pas inclure pour obtenir ce ou dois-je vraiment le pirater?
    J'essaye de faire une page pour imprimer une forme que je suis dupliquer - alors j'aimerais simplement être en mesure d'afficher sur l'écran ce qui se passe à l'impression. Div n'est pas blanc, des tables n'est pas blanc, les images apparaissent avec le fond j'ai mis dans le Div. Et ne pas avoir à tout modifier et de mettre en 500 !Notices et remplacer tout pour l'impression!

    OriginalL'auteur Ted

  2. 1

    Il ne l'est pas. Par défaut, ils ne sont pas imprimés. C'est une option du navigateur qui ne peuvent pas être surmontés par CSS/JS etc.

    Il y a ceci, qui force les couleurs...prétendument en Chrome

    -webkit-print-color-adjust

    Qui est répertorié comme un support UNIQUEMENT pour chrome, et pas pris en charge dans d'autres navigateurs.

    Mais le div élément est en cours d'impression. Et si je supprime class="table", ma table est en cours d'impression. Il y a un problème que si j'utilise class="table".
    Je ne peux pas utiliser Chrome, ma page est affichée dans le WPF composant WebBrowser qui utilisent IE

    OriginalL'auteur Joe Swindell

  3. 0

    J'ai utilisé un tableau ème ligne d'en-tête et le style comme ce

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

    OriginalL'auteur tfa

  4. 0

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

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

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

    OriginalL'auteur pszafer

  5. 0

    Ajout sur @Ted réponse, remplacer la valeur par défaut de bootstrap background-color !important règle:

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

    OriginalL'auteur The Aelfinn