impression avec haut et pied de page
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:
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:
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.
