CSS Comment faire pour imprimer un tableau avec la couleur d'arrière-plan (sans Impression les modifications de paramètres)
Le but est d'imprimer le tableau avec des couleurs td-s.
J'ai besoin d'un moyen de correct pour tous les types de navigateurs.
Est-il de toute façon?
- Je suis assez certain que la plupart des navigateurs par défaut pour ne PAS imprimer les milieux. Il n'y a rien que vous pouvez faire pour changer cela, quand vous êtes juste l'impression de HTML. Vous pouvez convertir en PDF, mais je ne sais pas si ce serait faisable pour vous.
- Cela peut vous aider: stackoverflow.com/questions/764520/...
- Cela ne doit pas être plus un problème. Je suis venu à cette question parce que j'ai eu un bootstrap page et bootstrap a un
@media print
requête qui supprime les couleurs d'arrière-plan à partir des tables (par exemple, bandes). - Firefox et Chrome donner la possibilité maintenant (c'est à dire en 2018)
Print Background Color
etBackground graphics
, respectivement, pour obtenir le travail fait simplement maintenant. Lorsque ces options sont désactivées, puis tous les CSS options de devenir inutile.
Vous devez vous connecter pour publier un commentaire.
Pour les navigateurs webkit (Chrome et Safari):
color-adjust:exact
. Dans FF, de toute façon.Citer ici: CSS @media print problèmes avec la couleur d'arrière-plan;
particulièrement laid solution est de placer une position .gif (ou de toute forme de graphique vectoriel de sorte que la taille peut être changée) de l'image dans la cellule du tableau avec la hauteur et la largeur de 100%, puis un négatif de la propriété z-index.
J'ai trouvé @willert de la solution un peu cohérente et simple. J'ai développé, j'espère qu'elle vous aide à vous les gars...
Il n'y a pas de solution qui n'est pas horriblement laid, comme le positionnement de l'image ou ridiculement grand frontière sous la table.
Cela dépend de ce que vous avez besoin de ces origines. Si c'est décoratif, il peut être préférable de ne pas le forcer.
Si c'est pour mettre en évidence certaines des cellules de tableau, vous pouvez utiliser la couleur
border
en plus de l'arrière-plan. Les frontières sont imprimés.Si il est très important que les arrière-plans sont imprimés, alors vous pouvez donner aux utilisateurs un fichier PDF à imprimer.
J'ai été jouer pour résoudre ce problème, et CSS de génération de contenu et les navigateurs modernes, semblent être une belle solution à ce problème. PAS LARGEMENT TESTÉ, COMMENTAIRES BIENVENUS!
Vous aurez besoin pour créer les détails en fonction de vos besoins.
HTH
Juger d'après mes recherches sur ce point, vous n'êtes pas susceptibles de trouver un CSS solution qui couvre tout. Vous pourriez être en mesure d'appliquer un jQuery solution à cette question.
La question est un peu vague, donc vous auriez probablement besoin de travailler avec le css avec
overflow
et réglage de la cellule/largeurs de colonne. Espérons que cette aide.Suffit d'Utiliser
!important
dans votre CSS et il apparaîtra à l'impression, en Chrome.Vous pouvez faire un peu de colorant à l'arrière-plan en mettant le contenu comme une balise de type submit et de la valeur de consigne de John Doe. puis utiliser la classe ou le style de manipuler la coloration. Jamais le moins, le navigateur va changer la forecoler de noir, de façon à utiliser uniquement sur fond clair, mais il fonctionne (un peu).
Cela fonctionne pour moi, et pas sur vos autres code CSS:
Ce stupide solution a fonctionné pour moi sur Firefox et Chrome (Ubuntu).
Firefox: Ouvrir la boîte de dialogue imprimer (raccourci: Ctrl+P) et goto
Options
onglet,et assurez-vous que l'option
Print Background Colors
est cochée.Chrome: Ouvrir la boîte de dialogue imprimer (raccourci: Ctrl+P) et d'élargir
More settings
et les tiquesBackground graphics
.Autant que je l'ai testé,
-webkit-print-color-adjust:exact;
ne fonctionne pas pour Firefox et est honoré dans google Chrome. Mais dans les deux navigateurs l'impression finale option remplace tout ça. Donc vous pouvez tout à fait faire sans elle.Essayez d'imprimer l'exemple suivant page HTML avec et sans les différents paramètres décrits ici et vous saurez.
HTML:
Pour chrome, vous pouvez utiliser ceci:
Ou dans l'aperçu avant impression, cochez la Plus de paramètres->Graphiques d'arrière-plan
Pour Firefox, vous ne pouvez pas l'activer à l'aide de CSS. Vous pouvez l'activer comme suit (Si vous ne voyez pas le Fichier, appuyez sur la touche Alt fois).
Fichier->Page de configuration et cochez la Imprimer l'arrière-plan(couleur & images)