Discussion :

[RobertHue]

Bonjour,

J'aimerai pouvoir imprimer un tableau HTML sur une seule page (la il est coupé en deux)
Pour sélectionner ce que je veux imprimer j'ai un print.css avec des display : none pour ce que j'enlève.
Existerai-t-il une technique spécifique qui fonctionne bien pour régler ce problème?

J'ai cherché et essayé le page-break-inside : avoid dans le css de mon tableau mais rien n'y fait.

Secondairement j'aimerai forcer l'impression en paysage est-ce possible?

SVP
Cordialement.

[Kaamo]

on pourrait avoir le code css du print.css ?
Pour l'impression, il faut utiliser :

Code :

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

1
2
<style type="text/css" media="print">
</style>

Ainsi, les styles contenus dans ce CSS ne seront appliqués qu'à l'impression du document.

Secondairement j'aimerai forcer l'impression en paysage est-ce possible?

Oui, avec le code suivant. Cependant, ce n'est compatible qu'avec Opéra aux dernières nouvelles.

Code css :

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

1
2
3
<style type="text/css" media="print">@page {
  size:landscape;
}</style>

Une petite astuce pour le rendre compatible multi-browser : tricher et appliquer des transformations à la page :

Code css :

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

1
2
3
4
5
6
7
<style type="text/css" media="print">
.page {
  -webkit-transform: rotate(-90deg); 
  -moz-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

[RobertHue]

on pourrait avoir le code css du print.css ?

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
body{
	background-color:#fff;
color:#000;
	font-size:10pt;
}
 
/*  début de la partie à ne PAS imprimer  */
#en_tete{
display:none;}
 
#menu{
display:none;}
 
#pied_de_page{
display:none;}
 
#tohide{
display:none;}
/*  fin de la partie à ne PAS imprimer  */
 
 
/*  début de la partie à imprimer  */
#corps{
	background-color:#FFFFFF;}
/*  fin de la Partie a imprimer  */
 
h1
{    
	font-size: 15px;
}
 
table.planning {
height: 300px;
page-break-inside: avoid;}

Sinon j'avais essayé

Code :

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

1
2
3
4
@page{ 
size:landscape; 
marks:none;
margin: 0 ;}

Et en effet ca ne marchais pas, merci de ta réponse, j'ai testé mais ca ressort toujours en portrait

[Kaamo]

Il est appelé comment le print.css ? Il faut qu'il soit appelé ainsi :

Code html :

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

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Bien sûr, il faut mettre le code ci-dessous dans "body" du print.css.

Code css :

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

1
2
3
4
5
body {
  -webkit-transform: rotate(-90deg); 
  -moz-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Logiquement, l'impression sera toujours sous la forme d'un portrait. Mais vu que tout l'affichage de la page subit une rotation de 90° dans le sens anti-horaire, ça simule un affichage en mode paysage.

[RobertHue]

En effet ça marche mieux avec le body merci

sinon il est bien appelé comme ça :

Code :

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

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

[RobertHue]

Un nouveau problème qui rejoint le premier se présente à moi, avec ta technique Kaamo lorsque mon tableau est trop grand pour tenir sur une page il est coupé et une seule pas est prise en compte à l'impression