[Résolu] Colorer les lignes d'un tableau seulement à l'impression

Bonjour,

Déjà, pour spécifier des styles uniquement pour l'impression, le plus indiqué me semble être d'utiliser dans le css un @media print {...}. Et à l"intérieur des {}, tu mets le css que tu veux, y compris donc un fond transparent et des bordures de l'épaisseur souhaitée.

De la même manière, on peut utiliser @media screen {...} pour mettre des styles uniquement pour les affichages à l'écran.

Ainsi, tu devrais pouvoir styler facilement d'une part ce que tu veux voir à l'écran, et d'autre part ce que tu veux imprimer sans combine.

Amicalement,

Bonjour,

Je suis "pretty sure" qu'il n'y a aucune obligation de mettre directement du css dans le html.

Si la couleur des bordures dépend à chaque ligne d'une variable php, tu peux par exemple rajouter cette information dans un attribut propriétaire du genre "data-border-color" (ces attributs doivent obligatoirement commencer par "data-"), et ensuite de cibler ça dans ton css. Je n'ai pas assez de détails sur ce que tu veux faire, donc il est possible que ce ne soit pas la meilleure solution dans ton cas. Mais il est très probable que ça puisse marcher.

Amicalement,
Modifié par parsimonhi (22 Jan 2022 - 19:26)

Pour supplanter un élément déjà définit dans le html il suffit de sursélectionner la cible :

:root .el { /* ou tout autre sélecteur parent, plusieurs s'il le faut */
  propriete: valeur;
}

En dernier recours il reste toujours le !important :

.el {
  propriete: valeur !important;
}

Et sinon, en plus des attributs de données on pourrait aussi imaginer l'utilisation de variables CSS à partir du html :

<div class="el" style="--bg-color-for-print: brown;"></div>

.el {
  background-color: var(--bg-color-for-print);
}

De toute façon ce que vous demandez est possible et la piste énoncée par Parsimonhi est la bonne.
Modifié par Olivier C (22 Jan 2022 - 20:13)

Bonsoir

Je vais essayer de vous présenter ce que je veux :
je voulais ne pas imprimer les couleurs de fond des lignes de mon tableau, très bien l'imprimante ne les imprime pas.
Donc je voulais faire des bordures colorées qui elles sont imprimées ce qui permet de différencier facilement les lignes même si elles n'ont pas de couleur de fond.
mais lorsque je fait ça à l'écran ce n'est pas joli même pas lisible!

dans le CSS:

tr /*  une bordure sur les lignes*/
{
    border: 1px solid black;
}

À l'aide d'une requête j'extrais d'une base de données. 
chaque ligne a une couleur de fond en fonction de la donnée donc variable à chaque ligne en fonction de la réponse de la requête 
je vais créer une ligne html à chaque ligne du résultat de la requête

<tr  style="border:3px solid <?php echo ($background_color) ;?>; background-color: <?php echo ($background_color) ;?>;" >

la variable $background php peut changer à chaque ligne du résultat de la requête
1) à l'écran le fait de mettre border de la même couleur que le background premièrement supprime le border black du CSS et deuxièmement coupe les bordures verticales du tableau, elles encore en noire.
2 ) mais lorsque j'imprime ce document comme l'imprimante n'imprime pas les couleurs de fond de ligne c'est parfait il n'y a que les bordures de la bonne couleur.

J'espère être compréhensible

J'ai trouvé comment faire:

<link href='styles/mef_activites.css' rel='stylesheet' type='text/css' media="screen" />
<link rel="stylesheet" type="text/css" href="styles/impression.css" media="print">

mef_activites.css

tr.ligne_impr
{
	border: 1px solid black !important;
}

impression.css

tr.ligne_impr 
{
border:0px;
}

<tr class="ligne_impr" style="border:3px solid <?php echo htmlspecialchars($background_color) ;?>; background-color: <?php echo htmlspecialchars($background_color) ;?> ;" >               

merci encore

Tant mieux si vous avez trouvé votre solution. Toutefois, je trouve dommage de devoir utiliser le serveur pour définir du style. En complément de ce qui a déjà été dit, savez-vous que :

- Si un tr est vide vous pouvez utiliser la pseudo-classe :empty

td:empty {
  background-color: tan;
}

- On peu colorier différemment 1 ligne sur 2 avec les mots clefs odd et even :

tr:nth-child(even) {
  background-color: tan;
}
tr:nth-child(odd) {
  background-color: peru;
}

Mais il y a encore bien plus de possibilité.

Bonjour

a écrit :
Toutefois, je trouve dommage de devoir utiliser le serveur pour définir du style.

je ne défini pas du style avec le serveur, je dirai plutôt que la couleur est une variable comme une autre donnée par le serveur.