Paramétrer le CSS pour l'impression

**maub85** · 10/04/2018, 08h14

Bonjour à tous,

Je n'arrive pas à imprimer correctement sur une feuille A4, les tableaux générés par mon site. Ce sont des tableaux tout bêtes qui listent des données venant de ma bdd mysql.
Je pilote (assez bien ?????) les CSS pour l'écran, mais pour l'impression je n'y arrive pas.

Mon souci est de fixer (volontairement) la largeur des cellules d'une ligne (donc des colonnes) pour qu'elles tiennent sur une A4, en portrait ... ou en paysage !
J'ai essayé différents paramètres (table-layout: fixed, width, th, td, tr, etc .... tout ça dans mon CSS pour le media="print") je ne comprends pas comment ça marche.

Je voudrais, par exemple, que la 1°col fasse 4cm, la 2° col 6cm, la 3° col 4cm et la 5° 4cm, pour arriver au total de 18 cm ... (sur les 21 de la page en portrait).
Comment définit-on la largeur des colonnes ??? en fonction des titres des colonnes ???

Je n'ai pas trouvé de forum répondant à ma préoccupation!

Je vous remercie de votre réponse ... même si elle est de me renvoyer vers un tuto (simple) sur la question.

Cordialement
Maub

Invité · 10/04/2018, 08h27

Bonjour,

à priori, table-layout: fixed devrait fonctionner.
Mais il faudrait au minimum nous montrer le code CSS, et la structure HTML de la table, qu'on puisse tester (même avec de "fausses données").

Explique-nous aussi ce qui ne va pas au moment de l'impression (cases trop grandes ? trop petites ? CSS non pris en compte ? ...?)
Éventuellement une copie ou photo du résultat obtenu à l'impression

**maub85** · 10/04/2018, 14h58

Bonjour,

Voici donc, suite à votre demande, le code HTML de la table à imprimer :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
	<table  class="liste_personnes"> 
			<tr>	
					<th>NOM           </th>
					<th>Prénom        </th>
					<th>Commune      </th>	
					<?php   if (($_SESSION['no_relais']) <> '1' ) {echo"    <th>Relais        </th> ";}  ?>
					<th>Téléphone Fixe     </th>
					<th>Téléphone Port.    </th>
					<th>Email        </th>  
					<th>Ph        </th>						<!--  Photo   -->
					<th><center> Actions </center></th>
			</tr>
 
 
<?php
                
                $my_sql = "SELECT * FROM personnes WHERE nom <> '' ORDER BY nom, prenom ASC";  //  Pour ne pas afficher la premeiere ligne - personne blanche  
                $result = mysqli_query($my_cnx, $my_sql) or die ('Erreur ici : '.mysqli_error($my_cnx) );
          $nb = mysqli_num_rows($result);  echo 'Il y a ' . $nb . ' fiches dans le fichier des PERSONNES. '; echo "<br>"; echo "<br>";
    while ($ligne = mysqli_fetch_assoc($result)) {     
                                echo "<tr>";
                                echo "<td>".$ligne['nom']."</td>";
                                echo "<td>".$ligne['prenom']."</td>";
                                echo "<td>".substr($ligne['cp_ville'],6,30)."</td>";
                                if (($_SESSION['no_relais']) <> '1' ) { echo "<td>".affiche_relais ($ligne['code_relais'])."</td>";}
                                echo "<td>".$ligne['tel_fixe']."</td>";  
                                echo "<td>".$ligne['tel_portable']."</td>";
                                echo "<td>".$ligne['e_mail']."</td>";   
                                $photo = $ligne['photo'];
                                if ($photo <>'') {                                                                                      //    Présence du NOM de la photo dans le champ $photo de la table
                                                $rep_photos ="REP_".$code_site."/Photos/"; 
                                                $chemin_fichier_photo = $rep_photos.$photo;
                                                echo '<div class="marge_image">';
                                                        echo " <td> <center> <IMG SRC=".$chemin_fichier_photo."  width=50px             max-height=70px >";           //  WIDTH=50px '>"; 
                                                echo '</div>';
                                }else{
                                                echo "<td> <center>"."No"." </center> </td>";   
                                }       
                    echo "<td> <center> <a href=\"Personne.php?id=$ligne[id_personne]\"> Voir_Détails </a> </center> </td>";
          }
 ?>
 
	</table>
 
<script type="text/javascript">
                function imprimer_page(){window.print();}
</script>

et voici ensuite le code de mon fichier CSS pour l'impression :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
/*  Ce CSS, situé dans le répertoire général, sert pour TOUTES les impressions de SIGMAWEB */
 
 
 
.no_print, a {										          /* Toutes Les classes ayant cette propriété ne seront pas imprimées  */
		display: none;
}
 
 
 
td, tr, th{
		padding: 5px 5px 5px 10px;  						                                                                         /*  Espacement du texte dans les cellules   */
		border: 1px solid black;								/*  Séparation et couleurs entre les cellules  */
		width: 5cm; 100px;
}		
 
 
 
th {
		background-color:lime;									/*   Spécifique aux titres des Tableaux   */
		width: 5cm; 100px;
}	
 
 
 
table {		
		text-align: left;																	
		background-color:white; yellow;    		
		margin:10px 10px 10px 10px;							
		width:10cm; 100px; 50%; 
		border:5px;
		table-layout:fixed;							       /*   Rend fixe la largeur des colonnes  */
		}
 
 
 
 
.liste_personnes {	
		text-align: left;											
		background-color:white;									
		margin: 10px 10px 10px 10px;					
		width: 10cm; 90%; 
		border-color: black;															
		border-width: 1px;
		border-style: solid;										/*  Bordue externe du tableau    */
		border-collapse: collapse; 							/*  Bordures et Tours de tableaux sont confondus  */
	}
 
 
h1 {
		color: #004d40; navy; #769712;
}
 
 
 
 
h2 {																							/*  NOM du Site  */
		text-align: center;
		color:black;
		padding-bottom:2px;
		padding-left:0px;														/* decalage par rapport à la gauche */
		font:bold 1.4em "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
 
}
 
 
 
h3 {
		font-weight:normal;  /*bold;*/
		color:blue;     /*#E7A800; */
}

et voici ce qui sort à l'impression :

Pièce jointe 368907

1-) Mon besoin est d'obtenir des colonnes adaptées à la taille maxi des données affichées dans la colonne, et à remplir (au maximum), toute la largeur de la page A4 (Portrait / Paysage) sauf les marges raisonnables bien sur (1 cm de chaque coté).
Est-ce possible et comment faire ?

2-) Quel serait le paramètre à informer (height ?) pour décider de la hauteur des lignes produites , et où le mettre ?

3-) Comment supprimer (cacher à l'impression) la dernière colonne (Actions) qui n'est utile que pour l'affichage à l'écran ?

Merci de votre aide.

Bien cordialement.
Maub

Invité · 10/04/2018, 16h32

Le code contenant du PHP n'a aucun intérêt ici.
Il faut le code HTML généré.

**maub85** · 10/04/2018, 16h44

J'ai donc fait afficher le code source, généré par le php .
J'espère que c'est ce que tu attends !

Maub

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
<a href="Creer_Personne.php"> Créer une nouvelle PERSONNE </a>	
		<br> <br>
		<input id="impression" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette liste " /> 
</div>		
 
	<table  class="liste_personnes"> 
			<tr>	
					<th>NOM           </th>
					<th>Prénom        </th>
					<th>Commune      </th>	
			<!--		 	<th>Relais        </th>	  -->
					<th>Téléphone Fixe     </th>
					<th>Téléphone Port.    </th>
					<th>Email        </th>  
					<th>Ph        </th>						<!--  Photo   -->
					<th><center> Actions </center></th>
			</tr>
 
 
Il y a 255 fiches dans le fichier des PERSONNES....

Invité · 10/04/2018, 16h49

Code :

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

		width: 5cm; 100px;

Y'a comme un défaut, non ?

(en plus de la syntaxe bizarre...)

Tu as 7 colonnes (si on enlève "Actions, sur lequel il suffit de mettre la class "no-print")

en orientation portrait :
18 cm / 7 = 2,57 cm.
Pas 5 cm.

Et même en orientation paysage :
28cm / 7 = 4 cm.

Code css :

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

1
2
3
4
5
6
7
8
table {		
	width:180cm;
	table-layout:fixed;  /*   Rend fixe la largeur des colonnes  */
}
td, th{
	width: 2.57cm; /* largeur des colonnes */
	overflow-wrap: break-word; /* césure des mots */
}

**maub85** · 11/04/2018, 18h38

Bonsoir,

Tout d'abord MERCI de ton aide pour les paramètres des CSS pour l'impression.
J'ai compris ... presque tout.

Comment dois-je faire pour que la colonne "email" soit (la seule) plus large pour contenir l'email en entier ?

En CSS, ... et avec du code HTML (ou via PHP) comment peut-on s'adresser précisément à la 1° ou à la 4° colonne , ou à la dernière ,par exemple, et définir leurs largeurs volontairement ?

Je te remercie à l'avance.
Bonne soirée.
Maub

**AdmChiMay** · 11/04/2018, 19h04

Bonjour,

Juste (pas) pour rire, rassures-nous : les coordonnées des personnes que tu affiches sur dvp sont toutes fausses ? que des jeux d'essais bidons ? Si "non"

, tu ferais bien de changer rapidement tes messages et tes jeux d'essais.

My 2 cents…

**maub85** · 11/04/2018, 20h11

Bonsoir,

Quels seraient vos conseils pour "effacer" les copies d'écran que j'ai postés, même si ils ont bidons !

Y a-t-il une solution de rattrapage sur le site qui permettrait de limiter la casse (éventuelle) ?

Merci
Maub

Paramétrer le CSS pour l'impression

CSS

Discussions similaires

Partager

Partager