Largeur tableau généré en php

**stevenP** · 14/03/2012, 12h25

Bonjour j'ai un soucis avec mon tableau.

J'ai un tableau que je génère en php depuis un BDD.

J'aimerai que mon tableau tienne sur la page actuelle en largeur et ne dépasse pas à droite comme ici :

Voici ma source php :

Code php :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<?php session_start(); ?>
 
<?php
 
// Au démarrage, aucune sélection : on extrait toutes les données individuellement pour chaque liste
 
mysql_connect('localhost', 'root', '');
mysql_select_db('xls_db');
 
// raison sociale
$sql = 'SELECT DISTINCT client FROM histo ORDER BY client';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataClient[] = $row['client']; 
}
 
// ROS
$sql = 'SELECT DISTINCT ros FROM histo ORDER BY ros';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataRos[] = $row['ros'];
}
 
// code postal
$sql = 'SELECT DISTINCT codepostal FROM histo ORDER BY codepostal';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataCp[] = $row['codepostal'];
}
 
// produit
$sql = 'SELECT DISTINCT id_produit FROM histo ORDER BY id_produit';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataProduit[] = $row['id_produit'];
}
 
// historique non filtré
// produit
$sql = 'SELECT * FROM histo';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataHisto[] = $row;
}
 
$hsc = function($p) { return htmlspecialchars($p, ENT_QUOTES); }
 
?>
 
<?php include('../doctype.html'); ?>
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
		<!-- Titre
		************************************************************-->
		<?php include('../titre.html'); ?>
 
		<!-- Feuille de style
		************************************************************-->
		<style type="text/css" media="screen">
			@import url(../styles/style.css);
		</style>
 
		<script type="text/javascript" src="functions.js"></script>
 
	</head>
 
	<body id="principal">
 
<?php
 
// Connexion à la base de données 
$server = 'localhost'; 
$user = 'root'; 
$pwd = ''; 
$dbName = 'xls_db'; 
$cnx = mysql_connect($server, $user, $pwd); 
$db = mysql_select_db($dbName); 
 
// REQUETE DONNEES DE LA TABLE 
$sql = <<<SQL
SELECT histo.id_produit, histo.type_produit, histo.ros, histo.client, histo.adresse, histo.adresseb, histo.ville, histo.codepostal
FROM histo  
ORDER BY 
histo.id_produit ASC,
histo.codepostal ASC,  
histo.type_produit ASC,  
histo.ros ASC, 
histo.client ASC,
histo.adresse ASC,
histo.adresseb ASC,
histo.ville ASC
SQL;
$qry = mysql_query($sql); 
while($row = mysql_fetch_assoc($qry)) { 
$data[] = $row; 
} 
 
?>
 
	<!-- Conteneur
	************************************************************-->
	<div id="conteneur">
 
		<!-- En-tete
		************************************************************-->
		<h1 id="header">
			<?php include("../titrepage.html"); ?>
		</h1>
 
 
 
		<!-- Barre verticale
		************************************************************-->
		<div id="navigation">
			<div id="styles">
					<?php include('../menu.html'); ?>
			</div>
 
			<div id="informations">
			<h2>Informations</h2>
				<?php include('../maj.html'); ?>
			</div>
		</div>
 
	<!-- Contenu
	************************************************************-->
	<div id="contenu">
		<div id="main">
		<div id="projet">
 
<p>
<?php
$date = date("d/m/Y");
$heure = date("H:i");
Print("<em>Bonjour, Nous sommes le $date et il est $heure</em>");
?>
</p>
 
		<h2><span>Historique Productions</span></h2>
 
			<p></p>
 
		</div>
 
		<div id="base">
 
		<h3><span>Base de Données Complètes des Productions Afféctées</span></h3>
 
			<p>
			<!-- Données de la table
			************************************************************-->
			<table>
			  <thead>
				 <tr>
					<th>Produit</th>
					<th>Type</th>
					<th>Client</th>
					<th>Adresse A</th>
					<th>Adresse B</th>
					<th>CP</th>
					<th>Ville</th>
					<th>ROS</th>
				 </tr>
			  </thead>
			  <tbody id="table">
				 <?php foreach($dataHisto as $row): ?>
				 <tr>
					<td><?php echo $hsc($row['id_produit']); ?></td>
					<td><?php echo $hsc($row['type_produit']); ?></td>
					<td><?php echo $hsc($row['client']); ?></td>
					<td><?php echo $hsc($row['adresse']); ?></td>
					<td><?php echo $hsc($row['adresseb']); ?></td>
					<td><?php echo $hsc($row['codepostal']); ?></td>
					<td><?php echo $hsc($row['ville']); ?></td>
					<td><?php echo $hsc($row['ros']); ?></td>
				 </tr>
				 <?php endforeach; ?>
			  </tbody>
			</table>	
			</p>
 
		</div>
 
		<!-- Bloc pour mettre des informations en bas de page
		************************************************************-->
		<div id="infostyle"><span></span></div>
 
		<!-- /Fin Contenu
		************************************************************-->
		</div>
	</div>
 
	<!-- Pied de page
	************************************************************-->
	<p id="footer">
		<?php include('../foot.html'); ?>
	</p>
 
<!-- /Fin Conteneur
************************************************************-->
</div>
 
<!-- Blocs supplémentaires pour ajouter des images
************************************************************-->
<div id="imgbloc1"><span></span></div>
<div id="imgbloc2"><span></span></div>
<div id="imgbloc3"><span></span></div>
<div id="imgbloc4"><span></span></div>
<div id="imgbloc5"><span></span></div>
 
<!-- Balises de fermeture
************************************************************-->
</body>
</html>

Et celui de mon 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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
/* Corps
************************************************************/
div {
	padding: 0;
	margin: 0;
}
body
{
	padding: 1ex 0;
	text-align: center;
	font-size: 70%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #f8f8f8;
	color: #000;
}
 
 
/* Liens
************************************************************/
a {
	color: #d00;
	text-decoration: none;
}
a:hover {
	color: #333;
}
 
 
/* En-tetes H
************************************************************/
h1 {
	font-size: 2.6em;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
}
h2 {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 2em;
}
h3 {
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.5em;
}
h4 {
	font-size: 1em;
	font-weight: bold;
}
h5 {
	font-size: 0.9em;
	font-weight: bold;
}
h6 {
	font-size: 0.8em;
	font-weight: normal;
}
 
 
/* Conteneur
************************************************************/
div#conteneur {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	background: #fff;
	border: 1px solid #eee;
}
 
 
/* Images
************************************************************/
img {
	border:0;
}
 
/* En-tete
************************************************************/
h1#header
{
	height: 7ex;
	background: #fff url(bg-header.png) center top;
	margin: 0;
	padding: 0;
	text-align: center;
}
h1#header a
{
	display: block;
	margin: 0 auto;
	color: #000;
	position: relative;
	top: 2ex;
}
 
 
/* Contenu
************************************************************/
div#contenu
{
	padding: 0 1em 3ex 14.5em;
}
div#main
{
	position: relative;
	top: 0;
	text-align: left;
}
div#contenu p
{
	margin: 0 0 0 0.7ex;
	line-height: 1.5em;
}
 
/* Barre verticale
************************************************************/
div#navigation {
	position: relative;
	float: left;
	left: 0;
	padding: 0 0 3ex 0;
	top: 0;
	width: 13em;
	text-align: left;
}
div#navigation h2 {
	padding: 0 0 0 1ex; 
	border-bottom: 1px solid #eee;
}
div#navigation p , div#navigation h3 , div#navigation h4 , div#navigation h5 , div#navigation h6{
	line-height: 1.5em;
	padding: 0 0 0 2ex;
}
div#navigation ul {
	list-style-type: none;
	cursor: pointer;
	padding: 0 0 0 0;
	line-height: 1.5em;
}
 
/* Pied de page
************************************************************/
p#footer {
	clear: left;
	padding: 1em 2ex;
	background: #f5f5f5;
	color: #555;
	margin: 0;
}
 
 
.flotte {
float:right;
}
 
p#footer a{
	color: #555;
	text-decoration: none;
}
 
/* Tableau
************************************************************/
 
table {
	border-collapse: collapse;
	padding: 3px;
	font-size: 100%;
}
 
th { 
	border: 1px solid black;
	border-collapse: collapse;
	padding: 3px;
}
 
tr, td {
	border: 1px dotted black;
	border-collapse: collapse;
	padding: 3px;
}
 
/* Menu
************************************************************/
 
#menu{
	width:150px;
	margin:20px auto 0 auto;
}
.menu, .sousmenu{
	text-align:center;
}
.menu{
	height:18px;
	width:150px;
	padding:2px 0;
	background:#404040;
	color:#fff;
}
.sousmenu{
	height:18px;
	width:150px;
	padding:1px 0;
	background:#808080;
	color:#fff;
}
 
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#404040;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#C36201;
}
 
ul , li {
	line-height: 1.5em;
}

**thelvin** · 14/03/2012, 23h42

Plusieurs possibilités :

- Mettre moins de colonnes.
- Coller les données de plusieurs colonnes dans une seule, pour en avoir moins.
- Forcer, avec un traitement PHP, des espaces réguliers dans les données, pour qu'elles puissent se mettre sur plusieurs lignes.
- Forcer les données en minuscules, avec text-transform: lowercase; ou un traitement PHP.
- Afficher dans une fonte plus petite.
- Forcer la largeur des <td>, <th> à un certain pourcentage de l'espace disponible, de sorte que le total fasse 100% ou moins, et un CSS overflow: scroll; .

Note : peu importe que ça vienne de php et d'une BDD. Ce qui compte, c'est le code HTML et CSS. Pas le code PHP.

**philodido** · 15/03/2012, 12h23

Bonjour,
Tu peux donner une largeur générale à ton tableau directement dans le html, exemple :

Code :

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

<table WIDTH=1002>

**thelvin** · 15/03/2012, 13h30

Envoyé par philodido

Bonjour,
Tu peux donner une largeur générale à ton tableau directement dans le html, exemple :

Code :

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

<table WIDTH=1002>

Ça ne marchera pas : le tableau est déjà plus grand que sa taille maximale théorique. C'est un peu le problème d'ailleurs.

Edit: euh, remarque, c'est pareil que mon idée de forcer la largeur des cellules. Mais l'un comme l'autre, ça ne marche qu'en utilisant le css table-layout: fixed; sur le tableau.

**philodido** · 15/03/2012, 14h13

Ok, je vois. Si c'était possible ça aurait par défaut redimensionné le tableau pour ne pas qu'il dépasse la taille de la fenêtre.

Largeur tableau généré en php

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager