Largeur d'un tableau issu d'une BDD

**laissaAnn** · 06/05/2013, 14h50

Bonjour à tous.

Je n'arrive pas avec le "width" à avoir une largeur fixe de cellules pour mon tableau. Je m'explique.

J'ai 13 colonnes dans mon tableau qui est une lecture de ma base Mysql. J'ai utilisé la fonction while pour pouvoir visualiser toutes les lignes de mon tableau.
Dans mon CSS, j'ai écrit :

Code :

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

1
2
3
4
5
6
7
8
9
table
{
    border-collapse: collapse;
}
td, th
{
    border: 1px solid black;
	width: 100px,
}

Le souci c'est que la largeur des cellules varie et je n'ai donc plus un tableau. Comment pourrais-je faire, s'il vous plaît ?
En fait ça marche bien avec chrome mais pas avec firefox et uniquement pour du texte très court dans certaines colonnes

**Torgar** · 06/05/2013, 16h57

Et si tu remplaces la virgule par un point-virgule ?

Code :

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

width: 100px,

**laissaAnn** · 06/05/2013, 17h29

J'ai mis mon ancien css. Désolée. Oui j'ai mis un ; et ça fait pareil

**Torgar** · 06/05/2013, 17h34

Rajoute une largeur à ta table aussi width = [largeur colonne] * [nbre de colonne]px;.

**laissaAnn** · 06/05/2013, 17h45

C'est encore pire. L'erreur pourrait elle venir du fait que dans mon code php j'ai créé mon code de proche en proche grâce à une boucle while?
Pour mon tableau je n'ai employé que des balises <td> <th> et <tr>.

**Torgar** · 06/05/2013, 17h48

Montre nous le code généré s'il te plait, ainsi que le CSS complet.

**laissaAnn** · 07/05/2013, 15h20

Excusez moi. Je n'ai pu revenir que maintenant.
Je vous envoie ce qui concerne ma page d'affichage de tableau ainsi que le css.

Merci beaucoup

**Torgar** · 07/05/2013, 15h35

Quelle partie de code généré tu n'as pas compris ?

Il nous faut le code de la page une fois qu'elle est affichée par le navigateur. Donc tu fais un clic-droit sur la page dans le navigateur, puis "Afficher le code source de la page", tu copies/colles ici le résultat.

**laissaAnn** · 07/05/2013, 15h50

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
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
 
<!DOCTYPE html>
<html>
    <head>
		<!-- Rajouter en PhP le nom de l'utilisateur -->
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>Suivi des AO: Consultation</title>
    </head>
 
    <body>
     <h1>Bienvenue dans le tableau de suivi des AO</h1>
 
    <p>Les options à ne pas oublier<br />
       Ligne, Configuration, Statistiques</p>
 
 
 
		    <h2>Fiche consultation</h2> 
 <!--A changer au moment de la mise en place sur le web -->
 <table>
	<tr>
	<th>Numéro </th>
    <th>Collectivité</th>
    <th>Département</th>
	<th>Intitulé</th>
    <th>Secteur
		<form method="post" action="traitement.php">
	<p> <!-- bloc de sélection du secteur-->
       <label for="secteur">Tri pour</label><br />
       <select name="secteur" id="secteur">
           <option value="pilotage">Pilotage</option>
		              <option value="dechet">Déchêt</option>
           <option value="eau">Eau</option>
           <option value="energie">Energie</option>
           <option value="equipement">Equipement</option>
           <option value="orga">Organisation</option>
           <option value="interco">Interco</option>
           <option value="transport">Transport</option>
       </select>
   </p>
		</form>
	</th>
	<th>Echéance</th>
    <th>Décision
		<p> <!-- Bloc pour la décision-->
       <label for="decision">Tri pour</label><br />
       <select name="decision" id="decision" required>
           <option value="GO">GO</option>
           <option value="NOGO">NOGO</option>
           <option value="attente">En attente</option>
 
       </select>
			</p>
	</th>
	<th>DCE reçue?
		<p> <!-- Bloc pour l'état-->
       <label for="etat">Tri pour</label><br />
       <select name="etat" id="etat">
           <option value="non">NON</option>
           <option value="oui">OUI</option>
       </select>
		</p>
	</th>
    <th>Responsable
		<p> <!-- Bloc pour le bloc respo. A revoir car ça doit etre fait automatiquement-->
       <label for="responsable">Tri pour</label><br />
       <select name="responsable" id="responsable required">
           <option value="Pierre-Vincent Guéret">Pierre-Vincent Guéret</option>
           <option value="Robert Picard">Robert Picard</option>
           <option value="Stéphane Baudry">Stéphane Baudry</option>
           <option value="Jérôme Bougelot">Jérôme Bougelot</option>
		   <option value="Vincent Pierrad">Vincent Pierrad</option>
       </select>
			</p>
	</th>
	<th>Partenaire</th>
    <th>Source</th>
	<th>Format</th>
    <th>Demande</th>
	</tr>
</table>
 
  <table >
	<tr>
	<td> 1</td>
    <td> R�gion Guyanne</td>
    <td> 973 </td>
    <td> Prestation de formation professionnelle </td>
	<td> PILO</td>
    <td> 2013-05-10 </td>
    <td>NoGO </td>
	<td> DCE re�u</td>
    <td>PVG </td>
    <td>Personne </td>
	<td>non renseign�</td>
    <td>Informatique </td>
    <td>2013-06-25 </td>
	</tr>
  </table>
 
  <table >
	<tr>
	<td> 2</td>
    <td> Grand Evreux Agglom�ration</td>
    <td> 27 </td>
    <td> Services de conseils financiers </td>
	<td> Equipement</td>
    <td> 2013-07-13 </td>
    <td>GO </td>
	<td> DCE en attente</td>
    <td>RP </td>
    <td>Sais pas </td>
	<td>non connu </td>
    <td>Informatique </td>
    <td>2013-09-18 </td>
	</tr>
  </table>
 
  <table >
	<tr>
	<td> 3</td>
    <td> Guadeloupe</td>
    <td> 971 </td>
    <td>  Outils decisionnels </td>
	<td> Pilotage</td>
    <td> 2013-07-25 </td>
    <td>GO </td>
	<td> oui</td>
    <td>Pierre-Vincent Gueret </td>
    <td> BD </td>
	<td>Réseaux</td>
    <td>informatique </td>
    <td>2013-06-01 </td>
	</tr>
  </table>
 
  <table >
	<tr>
	<td> 4</td>
    <td> Metropole Nice Côte d'Azur</td>
    <td> 6 </td>
    <td>  Montages opérationnels bilans financiers </td>
	<td> Equipement</td>
    <td> 2013-05-22 </td>
    <td>GO </td>
	<td> non</td>
    <td>Robert Picard </td>
    <td>  </td>
	<td></td>
    <td>informatique </td>
    <td>0000-00-00 </td>
	</tr>
  </table>
 
  <table >
	<tr>
	<td> 5</td>
    <td> Côte d'Azur</td>
    <td> 6 </td>
    <td>  On teste les é les è et les ï </td>
	<td> interco</td>
    <td> 2013-05-16 </td>
    <td>NOGO </td>
	<td> oui</td>
    <td>vp </td>
    <td> Personne </td>
	<td>Double-Trade</td>
    <td>papier </td>
    <td>2013-04-26 </td>
	</tr>
  </table>
 
  <table >
	<tr>
	<td> 6</td>
    <td> Ville du Marin</td>
    <td> 972 </td>
    <td> : Mission d'accompagnement manag�rial et m�thodologique de la ville dans le cadre de la mise en oeuvre d'une d�marche globale d'am�lioration de la performance au sein des services de la ville </td>
	<td> energie</td>
    <td> 0000-00-00 </td>
    <td>GO </td>
	<td> non</td>
    <td>Stéphane Baudry </td>
    <td>  </td>
	<td></td>
    <td>informatique </td>
    <td>0000-00-00 </td>
	</tr>
  </table>
	<form method="post" action="traitement.php">
	<p> <!-- bloc de sélection du secteur-->
       <label for="secteur">Secteur ?</label><br />
       <select name="secteur" id="secteur">
           <option value="pilo">Pilotage</option>
           <option value="dechet">Déchêt</option>
           <option value="italie">Eau</option>
           <option value="energie">Energie</option>
           <option value="equipement">Equipement</option>
           <option value="orga">Organisation</option>
           <option value="interco">Interco</option>
           <option value="transport">Transport</option>
       </select>
   </p>
		</form>
 
    <p>Ne pas oublier les boutons de sélection</p>
		<a href=https://mail.caliaconseil.fr/owa/">Boite mail </a> <br />
                <a href=http://opentime.info/calia/">Opentime </a> <br />
		<a href=http://www.useweb.net/calia-ged/php/login.php">Extranet </a>
 
		<p>Bonjour. Souhaitez-vous consulter <a href="Prospects.php">la page Prospects</a> ?</p>
    <h2>Zone de boutons</h2>
 
    <p>Visualiser du  <br />
	<input type="date" /> au 
    <input type="date" />
	</p>
 
	<p>Bonjour. Souhaitez-vous créer une  <a href="NewLign.php"> nouvelle ligne </a> au tableau des AO?</p>
 
 
    </body>
</html>

**laissaAnn** · 07/05/2013, 15h53

Mon problème c'est que le tableau se déforme alors que j'aimerais un tableau de même largeur quelque soit le nombre de caractères rentrés par cellule.
J'ai essayé width et même width= [taille]*[nombre de colonnes] comme vous me l'aviez conseillé précédemment mais ça ne marche pas

**rodolphebrd** · 07/05/2013, 17h45

Bonjour,

Après que @Torgar a débroussaillé le terrain je vous propose cette solution:

Code css :

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

1
2
3
4
5
6
7
8
td, th {
        border: 1px solid black;
	text-align: center; /* Centrage horizontal */
        vertical-align: middle; /* Centrage vertical */
	max-width: 100px;
	min-width: 100px;
        height: 120px;
}

**laissaAnn** · 13/05/2013, 11h37

Merci ça marche très bien. Et merci à Togar d'avoir débroussaillé tout ça.

Largeur d'un tableau issu d'une BDD

Dimensionnement en CSS

Discussions similaires

Partager

Partager