CSS Comment imprimer un tableau avec la couleur d'arrière-plan (sans modification des paramètres d'impression)

Question

Le but est d'imprimer un tableau avec des td-s colorés. J'ai besoin d'un moyen correct pour tous les types de navigateurs.

Y a-t-il un moyen?

Answer 1

Pour les navigateurs webkit (Chrome et Safari):

 body{
  -webkit-print-color-adjust:exact;
}
 

Answer 2

Citation de ici: CSS @media print problèmes avec la couleur d'arrière-plan;

SI un utilisateur a "Imprimer le Fond de page les couleurs et les images" éteint dans leurs paramètres d'impression, pas de CSS remplacer, donc toujours en compte pour qu'. C'est un réglage par défaut.

Une fois que c'est réglé de sorte qu'il sera imprimé les couleurs du fond et des images, ce qui vous avez il y aura du travail.

On le trouve dans des endroits différents. Dans IE9beta on en trouve dans Imprimer->Page Les Options de sous options de Papier

Dans FireFox, c'est dans la Page Configuration -> [Format et Options], Onglet Options.

Answer 3

une solution particulièrement laide consiste à placer une image .gif (ou toute forme de graphique vectoriel afin que la taille puisse être modifiée) dans la cellule du tableau avec une hauteur et une largeur de 100%, puis une propriété d'index z négative.

Answer 4

J'ai trouvé la solution de @ willert un peu cohérente et facile. Je l'ai développé plus loin, j'espère que cela vous aide les gars ...

 table {
    margin-top: 20px;
    border-collapse: separate;
    border-spacing: 0px;
    font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

table td,
table th {
    background-color: transparent;
    z-index: 1;
    border-right: 0;
    border-bottom: 0;
    width: 150px;
    padding-left: 5px;
    overflow: hidden;
    height: 12px;
}

table th:before,
table td:before {
    content: "";
    padding: 0;
    height: 1px;
    line-height: 1px;
    width: 1px;
    margin: 10px -994px -996px -2px;
    display: block;
    border: 0;
    z-index: -1;
    position:relative;
    top: -6px;
}

table th:before {
    border-top: 999px solid #D6D6D6;
    border-left: 999px solid #D6D6D6;
}

table td:before {
    border-top: 999px solid #F9F9F9;
    border-left: 999px solid #F9F9F9;
}
td div.grid_3{
    overflow: hidden;
}
table .row td{
    border-bottom: #d6d6d6 1px solid;
    width: 110px;
}
 

Answer 5

Il n'y a pas de solution qui ne soit horriblement laide, comme positionner l'image ou une bordure ridiculement grande sous la table.

Cela dépend de ce dont vous avez besoin pour ces antécédents. S'il est décoratif, il vaut peut-être mieux ne pas le forcer.

Pour mettre en évidence certaines cellules du tableau, vous pouvez utiliser la couleur border en plus de l'arrière-plan. Les bordures sont imprimées.

S'il est très important que les arrière-plans soient imprimés, vous pouvez fournir aux utilisateurs un PDF à imprimer.