Discussion :

[chrosnir]

Bonjour à tous,

voilà mon problème:
j'ai dans ma page html un tableau, contenu dans un div. Et ce que je veux faire c'est en cliquant sur un bouton pouvoir imprimer le contenu du tableau et seulement ca.

Voilà ma démarche jusqu'à maintenant:

J'ai tout d'abord créé un fichier css déstiné à donner le style de la feuille à imprilmer:

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
 
/*  zones à ne pas imprimer  */
#tete_de_page
{display:none;}
 
#pied_de_page
{display:none;}
/*  fin de la zone à ne pas imprimer  */
 
body 
{background: white;}
 
 /*  début du tableau à imprimer  */
#tableau
{
        display:block;
	clip:auto;
	overflow:visible;
	margin: 0 5%;
	padding: 0;
	border: 0;
	float: none !important;
	background: transparent;
}
/*  fin du tableau à imprimer  */

J'ai ensuite dans ma page html créé un lien vers la feuille css:

Code :

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

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

Et enfin j'ai créé le bouton d'appel à impression:

Code :

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

<input type='button' value='Imprimer le tableau' id='print' onclick='javascript:window.print()' style='position:absolute; top: 585px; left: 400px;'/>

Le problème c'est que dès que je clic sur le lien, il imprime toute la page et pas seulement le tableau.
L'autre problème c'est qu'il n'imprime que la partie visible du tableau (il y a une barre de défilement).

J'aimerais trouver un moyen en javascript pour qu'il n'imprime que le tableau et toutes les pages (pas seulement ce qu'il es visible).

Avez vous des pistes pour ca?

Merci

[E.Bzz]

Bonjour,

Le problème c'est que dès que je clic sur le lien, il imprime toute la page et pas seulement le tableau.
L'autre problème c'est qu'il n'imprime que la partie visible du tableau (il y a une barre de défilement).

l'intérêt du

Code :

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

media="print"

est d'avoir une feuille de style différente pour l'impression.
Ce que tu décris ici doit être géré par cette feuille de style :
Dans ce .css tu dois définir tous les éléments que tu ne souhaites pas imprimer en display:none; ou visibility:hidden; (l'un ou l'autre en fonction de l'impact sur ta mise en page).
Quant au tableau, tu as dû définir un overflow:scroll (ou auto) pour avoir la barre de défilement => enlève la propriété overflow (inutile) ainsi que la hauteur du tableau (pour qu'elle s'adapte au contenu).

Ca devrait aller mieux ...

A+

[chrosnir]

Oui tu as raison pour les display c'est ce que j'ai fait dans ma feuille css (comme tu peux le voir dans mon code) mais le problème c'est que je pense que la méthode "window.print()" prend de toutes facons toute la page pour imprimer quelque soit la feuille css. Parce que malgré les display ca m'inprime tout.

Sinon pour le problème du tableau comment puis-je faire pour désactiver la hauteur du tableau?
Je m'explique, j'ai défini une hauteur dans ma feuille html et je voudrai désactiver la hauteur dans ma feuille css pour qu'elle s'adapte au contenu comme tu m'a dit.

Merci pour tes réponse

[E.Bzz]

le problème c'est que je pense que la méthode "window.print()" prend de toutes facons toute la page pour imprimer quelque soit la feuille css. Parce que malgré les display ca m'inprime tout.

Non non : je t'assure que ça fonctionne

Sinon pour le problème du tableau comment puis-je faire pour désactiver la hauteur du tableau?
Je m'explique, j'ai défini une hauteur dans ma feuille html et je voudrai désactiver la hauteur dans ma feuille css pour qu'elle s'adapte au contenu comme tu m'a dit.

Il faut que tu enlèves la hauteur du code HTML : tu ne la définis que dans tes CSS. Comme ça tu peux la gérer différemment à l'écran et à l'impression (éventuellement en ne la définissant pas, du coup) ...

A+

[Bovino]

Juste pour vérifier, les liens des autres feuilles de style précisent bien media="screen" ?

[chrosnir]

Ca ne fonctionne toujours pas, ca prend toute la page. Peut etre qu'il y a un probleme avec ma feuille de style par défaut. Celle là je doit la définir en 'media:all' (l'autre étant en 'media:print') ou je ne défini pas du tout de media?

[E.Bzz]

Ca ne fonctionne toujours pas, ca prend toute la page. Peut etre qu'il y a un probleme avec ma feuille de style par défaut. Celle là je doit la définir en 'media:all' (l'autre étant en 'media:print') ou je ne défini pas du tout de media?

Juste pour vérifier, les liens des autres feuilles de style précisent bien media="screen" ?

A+

[chrosnir]

Oui je viens de voir aussi, merci à tout les deux.

Sinon il y a eu du changement, pour ce qui es des display ca marche niquel, j'arrive à faire apparaitre et disparaitre les éléments que je veux.

Par contre pour la taille du tableau il n'y a rien a faire, je modifie les champs width et height dans ma feuille de style print.css mais ca ne change rien du tout à la version imprimable. En largeur le tableau est coupé en plein milieu sur l'impression (il ne prend meme pas toute la taille de la fenetre à l'écran) et en hauteur il n'affiche que ce qui est visible à l'écran.

Là je seche complement :s

[tim974]

Es tu sur de bien définir les propriétés de ton tableau dans ton print.css, n'as tu pas oublié un table tr ? table tr td ?