28172 sujets

CSS et mise en forme, CSS3

Impression de facture avec entête et pied de page en css

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 :
<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.
Merci d'avance pour vos suggestions .
Salut,

je pense qu'il y a la solution a ton problème ici : https://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size

Principalement le dernier post : 


<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
</table>
</body>



<style type="text/css">
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: block; }
tfoot { display: block; }
}

</style>
Sujet clos
Aller à