18042 sujets

Questions générales et questions de débutants

[Résolu] Imprimer la couleur de fond d'un tableau

Bonjour à tous, j'essais d'imprimer un tableau créé avec Bootstrap mais je n'arrive pas à imprimer les couleurs de fond et ce malgré le fait que j'ai cocher "imprimer les images de fond" dans la boite de dialogue de l'impression (j'ai testé sous chrome, safari et Firefox).
J'ai également testé de mettre 
-webkit-print-color-adjust:exact;
sur mon body comme j'ai pu le lire quelque part mais ça ne change rien.

Quelqu'un aurait une idée svp ?
Modérateur
Salut,

Alors si j'ai bein compris il faut que tu mette 
-webkit-print-color-adjust: exact;
dans la classe ou il y a le background, pas sur le body. Par exemple :

.row {
  background: red;
  -webkit-print-color-adjust: exact;
  margin-top: 20px;
}
Merci pour ta réponse mais ça ne marche pas, j'ai essayé de le mettre sur le tableau, sur les th et les td mais rien y fait...

Une autre idée ?
Modérateur
Tu aurais un exemple en ligne sous le coude (soit ton site soit reproduit dans un jsFiddle ou Codepen) ?
Chez moi ça marche bien.
Modérateur
Effectivement ca me marche pas sur les TH c'est très étrange... Le seul fix que j'ai trouvé c'est de rajouter !important Smiley toilet à coté de la couleur pour que Chrome l'imprime... Le soucis c'est qu'il est défini par Bootstrap... :

.container .table-secondary,
.container .table-secondary>td,
.container .table-secondary>th {
  background-color: #d6d8db !important;
}
Meilleure solution
Ah enfaite j'ai un autre problème. Le border de mes deux cellules vides de la première ligne apparaissent à l'impression alors que j'ai mis un 
border: none;
. Auriez-vous la solution pour qu'ils n'apparaissent pas ?
Modifié par Jul67 (27 Jun 2018 - 11:51)
Modérateur
Hello en fait la raison est simple…

Dans Bootstrap (en tout cas dans les plus vieilles versions), il y avait un "media print" qui spécifiait que les cells devaient être blanches Smiley ravi .

Donc le important peut le faire ou il faut simplement trouver un sélecteur plus lourd.
Sujet clos
Aller à