Paramétrer le CSS pour l'impression

Version imprimable

10/04/2018, 08h14
maub85

Paramétrer le CSS pour l'impression

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
10/04/2018, 08h27
Invité

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

Mon code

Bonjour,

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

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

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

10/04/2018, 16h32
Invité

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

Le code source généré !

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:

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

Code:

width: 5cm; 100px;

Y'a comme un défaut, non ? :weird: (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:

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 */ }

11/04/2018, 18h38
maub85

Suite impression en CSS

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
11/04/2018, 19h04
AdmChiMay

Un peu de sécurité ?

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":aie:, tu ferais bien de changer rapidement tes messages et tes jeux d'essais.

My 2 cents…
11/04/2018, 20h11
maub85

Urgent, pour la sécurité

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