Impression d'un tableau sur une seule page

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.

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

Code:

---

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.

Citation:

---

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. :mrgreen:

Code:

---

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:

---

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>

---

Citation:

---

Envoyé par Kaamo

on pourrait avoir le code css du print.css ?

---

Code:

---

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:

---

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 :?

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

Code:

---

<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:

---

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.

En effet ça marche mieux avec le body :) merci

sinon il est bien appelé comme ça :

Code:

---

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

---

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

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 ?

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:

---

1 2 3

tr { page-break-inside: avoid;}

---

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:

---

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.

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.