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

[Kaamo]

Il y a bien plusieurs pages qui sont créées lors de l'aperçu. (sous Firefox 11.0 en tout cas).

Quel est le problème ? Il n'y a vraiment qu'une seule page prise en compte lors de l'impression ?

[RobertHue]

Oui il n'y a qu'une seule page prise en compte (quelque chose a peu près centré vers le milieu)
Mais ce n'est qu'un problème secondaire ca,
Ce qui m'intéresse surtout c'est d'avoir un tableau complet ( éventuellement qui ajuste sa taille en fonction de sa longueur ) ou au moins que les cellules ne soit pas "à cheval" sur le passage de page.
J'ai essayé de mettre

Code :

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

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

[Kaamo]

page-break-inside:avoid n'est pas supporté donc tu n'auras pas le résultat attendu (sauf sur Opera il me semble).

Utilise plutôt page-break-before:always sur les éléments <table> et non sur le <tr>.

Un ptit code qui fonctionne sur tous les navigateurs à priori :

Code html :

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
<!DOCTYPE html>
<html>
  <head>
    <title>page-break-before</title>
  </head>
  <body>
    <h1>1er</h1>
    <p>text</p>
    <h1 style="page-break-before:always">2ème page</h1>
    <p>texte</p>
    <table style="page-break-before:always">
      <tr>
        <td>
          3ème page : table
        </td>
      </tr>
    </table>
    <p>test table</p>
  </body>
</html>

Note : Le plus souvent, avoid, left et right ne sont pas supportés. Il faut utiliser auto ou always.

Pour ton problème de "cassure" au milieu d'un tableau ... je n'ai pas de solutions. Essaie de faire en sorte qu'un tableau ne dépasse pas la longueur d'une page et en mettant un page-break-before:always sur toutes tes tables, tu seras sûr qu'elles ne seront pas coupées.

[RobertHue]

Merci pour les réponses, mon tableau est trop grand pour tenir sur une page,
Je vais le laisser tel qu'elle a moins qu'il y ai moyen de le redimensionner facilement pour l'impression.