Discussion :

[lanfeust49]

Bonjour à tous,

je vous expose mon problème :

je dois pouvoir imprimer une facture sans utiliser le format pdf. Pour cela j'utilise la fonction window.print() . Mon problème est que je voudrais pouvoir mettre un haut de page et bas de page identique sur chacune de mes pages. Pour info, le contenu principale de ma page est un tableau (en gros je voudrai header=>tableau=>footer sur chaque page). J'ai réussi à le faire en utilisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<style type=text/css media=print>
#enTetePrint {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  }
#piedPagePrint {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  }
 
</style>

Grâce à ce code, j'affiche le header et le footer sur chacunes des pages. Le problème est que mon tableau chevauche le header et le footer. Je voudrais donc dire à mon tableau tu commences à 3 cm du haut et 3 cm du bas sur chacune des pages afin de laisser de la place au pied et haut de page. Je n'ai pas trouvé de solution, j'ai essayé avec @page{ margin-top:3 cm; margin-bottom:3cm;} mais cela pousse le header, le footer et le table de 3cm. J'ai essayé des combinaisons avec @page et le table sans réussir. J'ai aussi essayé avec des thead, tfoot, tbody mais je n'ai pas été convaincu car premièrement, les navigateurs réagissaient différemment et deuxièmement le footer n'était pas tout en bas de la page mais juste après la fin du tableau pour la dernière page.

Je vous demande donc de l'aide pour pouvoir définir des marges mais seulement sur mon tableau. J'espère avoir été à peu prêt claire.

PS : j'utilise ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 tr{
page-break-inside:avoid;
}

pour que les tr de mon tableau ne soit pas coupé. Petit problème, la bordure bottom de chaque <tr> de fin de page n'est pas visible sur le bas de la page mais seulement sur le haut de la prochaine page (sur le tr d'après en gros). Ca fait un peu bisar de pas avoir cette bordure, on a l'impression que le tr n'est pas fini.

[Macmillenium]

Bonsoir,

J'ai aussi essayé avec des thead, tfoot, tbody mais je n'ai pas été convaincu car premièrement, les navigateurs réagissaient différemment

Le media=print cible uniquement les appareils d'impression, les autres types de médias sont exclus.

Il faudrait passer par la méthode classique, à toi de gérer la hauteur de ton tableau selon le format de ta facture.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
body, html { 
	padding:0; 
	margin:0; 
	height:100%; 
}
 
#enTetePrint {
  /* display: block; */
  /* position: fixed; */
  position: absolute;
  top: 0;
  width:100%;
  height:50px;
  /* right: 0; */
}
 
#piedPagePrint {
  /* display: block; */
  /* position: fixed; */
  position: absolute;
  bottom: 0;
  width:100%;
  height:50px;
  /* right: 0; */
}
 
table { 
	padding:50px 0
}

j'ai essayé avec @page{ margin-top:3 cm; margin-bottom:3cm;} mais cela pousse le header, le footer et le table de 3cm.

C'est normal.
La règle @page permet simplement de définir les dimensions et les marges de la page.

[lanfeust49]

Tout d'abord merci pour ta réponse Macmillenium.

Quand je parlais des problèmes sur les différents navigateurs, je parlais du rendu à l'impression. De mozilla à IE à opéra pour ne citer que cela, il y avait des problèmes avec le tableau. J'ai résolu cela grâce à ton message car j'ai réessayé avec les balises tfoot... J'utilisais plusieurs tables, j'ai tout regroupé en un tableau. SI je continue avec cette méthode (qui me semble la plus adaptée pour le moment) je dois régler impérativement 2 problèmes :

- Pour passer à la page suivante à chaque TR j'utilisais page-break-inside:avoid;
Cependant, maintenant cela n'est plus pris en compte. J'ai essayé avec page-break-after et before en auto ça ne fonctionne pas. En always ça fonctionne mais (et c'est logique) ça me fait beaucoup de feuilles pour pas beaucoup de contenu.

- il faut que le footer soit toujours tout en bas. Or sur la dernière page il est juste à la fin du tableau (logique aussi). Avec un height à 100% ça ne rend pas comme ça (encore moins sous IE). De plus si j'arrive à faire le saut de page quand un TR est coupé, le footer sera plus ou moins bas en fonction de la taille du TR le précédent.

Une idée ? ou plusieurs ?