28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Avant toute chose, bravo pour ce fantastique site, pour cette mine d'informations et pour ses participants compétents.

Je suis en train de mettre au point une feuille de style d'impression (media="print").
A l'écran, certaines lignes de tableaux peuvent être, à volonté, masquées ou affichées à chaque fois que l'on clique sur une icône (un petit javascript effectue un simple display: none ou non).
Toutefois, lors de l'impression de cette page, je souhaiterai que toutes les lignes des tableaux (quelques soient masquées ou non à l'écran) soient imprimées.

Pouvez-vous m'aider ? Smiley sweatdrop

Remarque : pour tester que je pouvais bien agir sur le contenu imprimé, j'ai réussi à faire le contraire de ce que je désire avoir, c'est-à-dire ne pas imprimer une ligne affichée à l'écran en faisant un simple
#ligne_x {
display: none;
}
dans ma feuille de style d'impression.
Mais je voudrais arriver à faire le contraire Smiley decu
Salut

Pourquoi ne pas faire simplement le contraire dans les feuilles de style ?

dans la feuille de style normale :
#ligne_x {
   display: none;
}
et dans la feuille de style pour l'impression:
#ligne_x {
   display: block;
}
Ta réponse est tout à fait logique Smiley cligne
Je l'ai même essayé... mais ça ne marche pas Smiley decu
Je ne sais pas pourquoi et c'est la raison pour laquelle je suis ici à demander de l'aide.

Une petite précision pour être plus clair. Mon tableau est de la forme :
<table>
  <tr><td>Ligne toujours affichée (à l'écran comme à l'impression)</td></tr>
  <tr [b]id="ligne_x"[/b]><td>Ligne alternativement masquée ou affichée</td></tr>
</table>
Oups, j'avais pas vu qu'on parlait d'une ligne de tableau Smiley confused

Est-ce que ça marche avec
display: table-row;
?

Sinon, tu peux aussi essayer avec
visibility: hidden/visible
Avec
display: table-row;
ça ne marche pas.
Avec visibility, je n'aurais pas le résultat escompté : visibility cache ou non l'élément sur lequel il est appliqué mais garde la place de cet élément en laissant une ligne vide.
Pour ma part, je désire bien que mon tableau se "plie" et se "déplie".
Bonjour,

Réserver simplement les classes de style de "pliage"/"dépliage" à l''affichage écran, en les mettant dans une css media="screen", en appliquant les classes via js, et en évitant les element.style.display...
Je ne suis pas sûr d'avoir complètement compris la proposition de Laurent Denis mais je crois qu'elle est proche de la solution que m'a proposé un collègue et qui marche Smiley biggrin

Je vous expose donc cette solution.

Mon javascript de pliage/dépliage agissait - comme le dit Laurent - sur la propriété style.display de ligne_x en y mettant soit '', soit 'none'.
J'ai changé la définition de ma ligne <tr> en lui attribuant un style ligne_cachee par défaut. Mon javascript n'agit plus alors sur la propriété style.display mais sur la propriété className dans laquelle je stocke alternativement ligne_affichee ou ligne_cachee.
Dans la CSS de type screen, ligne_affichee est défini avec un display: table-row; et ligne_cachee avec display: none;.
Dans la CSS de type print, les deux classes ont été définies avec display: table-row;.

Merci à tous pour votre aide.
Modifié par Zgema (01 Feb 2007 - 17:43)