Table : Avoir une colonne "extensible"

**pontus21** · 10/08/2009, 12h52

Bonjour,

Mon problème est simple mais sa réalisation/résolution ne l'est pas (pour moi) !

J'ai un table avec une largeur fixe.
J'aimerais que mes colonnes s'auto-ajustent en largeur suivant leur contenu et que j'aie une dernière colonne qui prenne toute la place restante ...

Comment faire ?

**Doki95** · 10/08/2009, 15h00

Je crois que si tu laisses les valeurs par défaut (comprendre:ne rien préciser) t'es colonnes doivent s'ajuster automatiquement et la dernière colonne prendra le reste de la place.

**tibotibo69** · 10/08/2009, 15h16

C'est aussi ce que je pensais, j'ai fait un essai mais non concluant.

Voici mon exemple :

Code :

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

1
2
3
4
5
6
7
<table style="width: 700px;">
	<tr>
		<td style="border:1px solid black;">contenu1, contenu1, contenu1</td>
		<td style="border:1px solid black;">contenu2, contenu2</td>
		<td style="border:1px solid black;">reste du contenu</td>
	</tr>
</table>

On peut constater que la dernière colonne ne prend pas le reste de la place.

**pontus21** · 10/08/2009, 15h49

En fait, j'ai même pas de contenu dans la dernière colonne. Mes colonnes (sauf la dernière) ont une taille définie en CSS.

Ca fonctionne correctement à l'affichage, au départ.
C'est jusque qu'avec JQuery, en cliquant sur un bouton de la ligne, j'affiche ou non la ligne suivante qui est :

<tr class="cachee"><td colspan="50">D'autres informations</td><tr>

Le soucis, c'est qu'au clic, il m'affiche bien la deuxième ligne, mais les entêtes du tableau et la première ligne sont redimensionnées ...
Sous Firefox ou Chrome aucun problème. Sous IE, même IE 7, ça merde ...

**tibotibo69** · 10/08/2009, 15h55

Envoyé par pontus21

<tr class="cachee"><td colspan="50">D'autres informations</td><tr>

Tu as donc 50 colonnes dans ton tableau.

Peux-tu envoyer ton code stp ?

**pontus21** · 10/08/2009, 16h45

J'en ai moins que 50 mais c'est pour être sûr de prendre toutes les colonnes.

Voilà mon code :

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
<html>
	<head>
		<script src="resultat-test_fichiers/jquery_003.js" type="text/javascript"></script>
		<script src="resultat-test_fichiers/jquery_002.js" type="text/javascript"></script>
		<script src="resultat-test_fichiers/jquery.js" type="text/javascript"></script>
	</head>
<body>
 
<script>
                
                $(document).ready(function(){
                        $("table.site").hide();
                        
                        $(".deplier_sites").click(function(){
                                idclient = this.className.split(" ")[1].split("_")[1];
                                if(this.value == '+'){
                                        $(".site.idclient_" + idclient).show();
                                        $(".idclient_" + idclient + ".bouton").attr('value', '+');
                                }else{
                                        $(".site.idclient_" + idclient).hide();
                                }
                                this.value = (this.value == '-') ? '+' : '-';
                        });
                        
                });
        </script>
 
<style>
@CHARSET "UTF-8";
 
 
body{
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        font-family: Arial;
        font-size: 10pt;
}
 
th.bouton, td.bouton{
        width: 40px;
}
 
td.deniere_colonne{
        width: auto;
}
 
/* Affichage des clients */
table.client{ width: 3900px;}
table.client tr.client{ background-color: #DDDDCC; }
th.id_client, td.id_client{
        width: 120px;
}
th.id_ent, td.id_ent{
        width: 120px;
}
td.nom_entreprise, th.nom_entreprise{
        width: 280px;
}
td.siren, th.siren{
        width: 140px;
}
td.agence, th.agence{
        width: 200px;
}
td.topPme, th.topPme{
        width: 50px;
}
td.topGc, th.topGc{
        width: 50px;
}
 
th.id_client, th.nom_entreprise, th.siren, th.agence, 
th.topPme, th.topGc, th.id_ent{
        border-bottom: 1px solid black;
}
 
/* Affichage des sites */
table.site{ margin-left: 20px; width: 3880px;}
table.site tr.site{ background-color: #DDCCDD; }
th.id_site, td.id_site{ width: 125px; }
td.adresse_installation, th.adresse_installation{
        width: 250px;
}
td.ville_installation, th.ville_installation{
        width: 180px;
}
td.cp_installation, th.cp_installation{
        width: 100px;
}
th.id_site, th.adresse_installation, 
th.ville_installation, th.cp_installation{
        border-bottom: 1px solid black;
}
 
div#resultats{
        width   :       3900px;
}
 
</style>
 
 
<div id="resultats">
			<table class="client" border="1">
				<tbody><tr class="entetes_client">
					<th class="bouton center" width="80px">+/-</th>
					<th class="id_client">Id Client</th>
					<th class="id_ent">Id Ent</th>
					<th class="nom_entreprise">Nom Entreprise</th>
					<th class="siren">SIREN</th>
					<th class="agence">Agence commerciale</th>
					<th class="topPme">Top Pme</th>
					<th class="topGc">Top GC</th>
					<th>TEST</th>
				</tr>
 
				<tr class="client">
					<td class="bouton center">
							<input style="display: inline;" value="+" class="deplier_sites idclient_123456 bouton" type="button">
					</td>
					<td class="id_client">123456</td>
					<td class="id_ent">123456</td>
					<td class="nom_entreprise">Entreprise XXX</td>
					<td class="siren">123123</td>
					<td class="agence">SUD OUEST</td>
					<td class="topPme">
						<input style="display: inline;" disabled="disabled" type="checkbox">
					</td>
					<td class="topGc">
						<input style="display: inline;" disabled="disabled" type="checkbox">
					</td>
					<td></td>
				</tr>
 
				<tr class="donnees_client">
				<td colspan="50">
					<table border="1" class="site idclient_123456">
						<tbody><tr class="entetes_site">
							<th class="bouton center">+/-</th>
							<th class="id_site">Id Site</th>
							<th class="adresse_installation">Adresse installation</th>
							<th class="ville_installation">Ville site</th>
							<th class="cp_installation">CP site</th>
							<th>TEST</th>
						</tr>
 
						<tr class="site idclient_123456">
							<td class="bouton center">
									<input style="display: inline;" value="+" class="deplier_installations idsite_456789 idclient_123456 bouton" type="button">
 
							</td>
							<td class="id_site">456789</td>
							<td class="adresse_installation">0000 adresse</td>
							<td class="ville_installation">ville</td>
							<td class="cp_installation">75000</td>
							<td></td>
						</tr>
 
						</tbody></table>
 
					</td>
					</tr>
 
			</tbody></table>
		</div>
 
</body>
</html>

J'ai tout mis dans un seul fichier pour que vous puissiez tester directement.
Il faut juste mettre Jquery avec.

Edit : Au pire, je fais un zip.

**pontus21** · 10/08/2009, 16h48

Voilà, j'ai fait un zip ...

**lifty** · 10/08/2009, 17h19

Salut,

J'ai corrigé quelques erreurs de html et j'obtiens ça.
Ce qui ne donne pas le résultat voulu mais est plus cohérent au niveau du comportement sous ff Et sous IE.

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
<html>
	<head>
		<script src="test_fichiers/jquery_003.js" type="text/javascript"></script>
		<script src="test_fichiers/jquery_002.js" type="text/javascript"></script>
		<script src="test_fichiers/jquery.js" type="text/javascript"></script>
	</head>
<body>
 
<script>
                
                $(document).ready(function(){
                        $("table.site").hide();
                        
                        $(".deplier_sites").click(function(){
                                idclient = this.className.split(" ")[1].split("_")[1];
                                if(this.value == '+'){
                                        $(".site.idclient_" + idclient).show();
                                        $(".idclient_" + idclient + ".bouton").attr('value', '+');
                                }else{
                                        $(".site.idclient_" + idclient).hide();
                                }
                                this.value = (this.value == '-') ? '+' : '-';
                        });
                        
                });
        </script>
 
<style>
@CHARSET "UTF-8";
 
 
body{
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        font-family: Arial;
        font-size: 10pt;
}
 
th.bouton, td.bouton{
        width: 40px;
}
 
td.deniere_colonne{
        width: auto;
}
 
/* Affichage des clients */
table.client{ width: 3900px;}
table.client tr.client{ background-color: #DDDDCC; }
th.id_client, td.id_client{
        width: 120px;
}
th.id_ent, td.id_ent{
        width: 120px;
}
td.nom_entreprise, th.nom_entreprise{
        width: 280px;
}
td.siren, th.siren{
        width: 140px;
}
td.agence, th.agence{
        width: 200px;
}
td.topPme, th.topPme{
        width: 50px;
}
td.topGc, th.topGc{
        width: 50px;
}
 
th.id_client, th.nom_entreprise, th.siren, th.agence, 
th.topPme, th.topGc, th.id_ent{
        border-bottom: 1px solid black;
}
 
/* Affichage des sites */
table.site{ margin-left: 20px; width: 3880px;}
table.site tr.site{ background-color: #DDCCDD; }
th.id_site, td.id_site{ width: 125px; }
td.adresse_installation, th.adresse_installation{
        width: 250px;
}
td.ville_installation, th.ville_installation{
        width: 180px;
}
td.cp_installation, th.cp_installation{
        width: 100px;
}
th.id_site, th.adresse_installation, 
th.ville_installation, th.cp_installation{
        border-bottom: 1px solid black;
}
 
div#resultats{
        width   :       3900px;
}
 
</style>
 
 
<div id="resultats">
			<table class="client" border="1">
				<thead>
          <tr class="entetes_client">
  					<th class="bouton center" width="80px">+/-</th>
  					<th class="id_client">Id Client</th>
  					<th class="id_ent">Id Ent</th>
  					<th class="nom_entreprise">Nom Entreprise</th>
  					<th class="siren">SIREN</th>
  					<th class="agence">Agence commerciale</th>
  					<th class="topPme">Top Pme</th>
  					<th class="topGc">Top GC</th>
  					<th>TEST</th>
  				</tr>
				<thead>
				<tbody>
  				<tr class="client">
  					<td class="bouton center">
  							<input style="display: inline;" value="+" class="deplier_sites idclient_123456 bouton" type="button">
  					</td>
  					<td class="id_client">123456</td>
  					<td class="id_ent">123456</td>
  					<td class="nom_entreprise">Entreprise XXX</td>
  					<td class="siren">123123</td>
  					<td class="agence">SUD OUEST</td>
  					<td class="topPme">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
  					<td class="topGc">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
  					<td></td>
  				</tr>
 
  				<tr class="donnees_client">
  				  <td colspan="6">
    					<table border="1" class="site idclient_123456">
    						<thead>
                  <tr class="entetes_site">
      							<th class="bouton center">+/-</th>
      							<th class="id_site">Id Site</th>
      							<th class="adresse_installation">Adresse installation</th>
      							<th class="ville_installation">Ville site</th>
      							<th class="cp_installation">CP site</th>
      							<th>TEST</th>
    						  </tr>
    					  <tbody>
      						<tr class="site idclient_123456">
      							<td class="bouton center">
      									<input style="display: inline;" value="+" class="deplier_installations idsite_456789 idclient_123456 bouton" type="button">
 
      							</td>
      							<td class="id_site">456789</td>
      							<td class="adresse_installation">0000 adresse</td>
      							<td class="ville_installation">ville</td>
      							<td class="cp_installation">75000</td>
      							<td></td>
      						</tr>
 
  					   	</tbody>
            </table>
 
					 </td>
					</tr>
 
			</tbody>
      </table>
		</div>
 
</body>
</html>

Je travaille sur la solution

**lifty** · 10/08/2009, 17h30

Voilà,

J'ai supprimé une partie de ton utilisation de table, tu imbriquais des tables dans des tables. Or cela posait des problèmes au niveau de la gestion des colonnes.

J'ai donc remplacé cette hiérarchie de table par différents niveau de div.

Exemple :

div
table1
/div
div
table2
/div
...

Voilà le code html pour ton site.

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
<html>
	<head>
		<script src="test_fichiers/jquery_003.js" type="text/javascript"></script>
		<script src="test_fichiers/jquery_002.js" type="text/javascript"></script>
		<script src="test_fichiers/jquery.js" type="text/javascript"></script>
	</head>
<body>
 
<script>
                
                $(document).ready(function(){
                        $("table.site").hide();
                        
                        $(".deplier_sites").click(function(){
                                idclient = this.className.split(" ")[1].split("_")[1];
                                if(this.value == '+'){
                                        $(".site.idclient_" + idclient).show();
                                        $(".idclient_" + idclient + ".bouton").attr('value', '+');
                                }else{
                                        $(".site.idclient_" + idclient).hide();
                                }
                                this.value = (this.value == '-') ? '+' : '-';
                        });
                        
                });
        </script>
 
<style>
@CHARSET "UTF-8";
 
 
body{
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        font-family: Arial;
        font-size: 10pt;
}
 
th.bouton, td.bouton{
        width: 40px;
}
 
td.deniere_colonne{
        width: auto;
}
 
/* Affichage des clients */
table.client{ width: 3900px;}
table.client tr.client{ background-color: #DDDDCC; }
th.id_client, td.id_client{
        width: 120px;
}
th.id_ent, td.id_ent{
        width: 120px;
}
td.nom_entreprise, th.nom_entreprise{
        width: 280px;
}
td.siren, th.siren{
        width: 140px;
}
td.agence, th.agence{
        width: 200px;
}
td.topPme, th.topPme{
        width: 50px;
}
td.topGc, th.topGc{
        width: 50px;
}
 
th.id_client, th.nom_entreprise, th.siren, th.agence, 
th.topPme, th.topGc, th.id_ent{
        border-bottom: 1px solid black;
}
 
/* Affichage des sites */
table.site{ margin-left: 20px; width: 3880px;}
table.site tr.site{ background-color: #DDCCDD; }
th.id_site, td.id_site{ width: 125px; }
td.adresse_installation, th.adresse_installation{
        width: 250px;
}
td.ville_installation, th.ville_installation{
        width: 180px;
}
td.cp_installation, th.cp_installation{
        width: 100px;
}
th.id_site, th.adresse_installation, 
th.ville_installation, th.cp_installation{
        border-bottom: 1px solid black;
}
 
div#resultats{
        width   :       3900px;
}
 
</style>
 
 
<div id="resultats">
      <div>
			<table class="client" border="1">
				<thead>
          <tr class="entetes_client">
  					<th class="bouton center" width="80px">+/-</th>
  					<th class="id_client">Id Client</th>
  					<th class="id_ent">Id Ent</th>
  					<th class="nom_entreprise">Nom Entreprise</th>
  					<th class="siren">SIREN</th>
  					<th class="agence">Agence commerciale</th>
  					<th class="topPme">Top Pme</th>
  					<th class="topGc">Top GC</th>
  					<th>TEST</th>
  				</tr>
				<thead>
				<tbody>
  				<tr class="client">
  					<td class="bouton center">
  							<input style="display: inline;" value="+" class="deplier_sites idclient_123456 bouton" type="button">
  					</td>
  					<td class="id_client">123456</td>
  					<td class="id_ent">123456</td>
  					<td class="nom_entreprise">Entreprise XXX</td>
  					<td class="siren">123123</td>
  					<td class="agence">SUD OUEST</td>
  					<td class="topPme">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
  					<td class="topGc">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
  					<td></td>
  				</tr>
  			</tbody>
  		</table>
  	 </div>	
     <div>
        <table class="site idclient_123456" border="1">			
    						<thead>
                  <tr class="entetes_site">
      							<th class="bouton center">+/-</th>
      							<th class="id_site">Id Site</th>
      							<th class="adresse_installation">Adresse installation</th>
      							<th class="ville_installation">Ville site</th>
      							<th class="cp_installation">CP site</th>
      							<th>TEST</th>
    						  </tr>
    						  </thead>
    					  <tbody>
      						<tr class="site idclient_123456">
      							<td class="bouton center">
      									<input style="display: inline;" value="+" class="deplier_installations idsite_456789 idclient_123456 bouton" type="button">
 
      							</td>
      							<td class="id_site">456789</td>
      							<td class="adresse_installation">0000 adresse</td>
      							<td class="ville_installation">ville</td>
      							<td class="cp_installation">75000</td>
      							<td></td>
      						</tr>
 
  					   	</tbody>
          </table>
				</div>
 
		</div>
 
</body>
</html>

Attention aussi à tes tbody et tes theads, tu avais placé des <th> dans une balise tbody ce qui peut poser des problèmes.

La gestion des div a aussi permis de se débarrasser du colspan (pas beau un colspan a 50 pour seulement 6 colonnes !)

De plus maintenant que les différents niveau de tes tables sont indépendants, tu peut supprimer ta colonne de test. Cependant si tu veut que tes colonne respectent la taille que tu leur a assignée il faut que tu change ton css (à savoir supprimer/commenter la taille fixe a 3900px)

Comme ceci :

Code css :

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
<style>
@CHARSET "UTF-8";
 
 
body{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial;
	font-size: 10pt;
}
 
th.bouton, td.bouton{
	width: 40px;
}
 
td.deniere_colonne{
	width: auto;
}
 
/* Affichage des clients */
/*table.client{ width: 3900px;}*/
table.client tr.client{ background-color: #DDDDCC; }
th.id_client, td.id_client{
	width: 120px;
}
th.id_ent, td.id_ent{
	width: 120px;
}
td.nom_entreprise, th.nom_entreprise{
	width: 280px;
}
td.siren, th.siren{
	width: 140px;
}
td.agence, th.agence{
	width: 200px;
}
td.topPme, th.topPme{
	width: 50px;
}
td.topGc, th.topGc{
	width: 50px;
}
 
th.id_client, th.nom_entreprise, th.siren, th.agence, 
th.topPme, th.topGc, th.id_ent{
	border-bottom: 1px solid black;
}
 
/* Affichage des sites */
table.site{ margin-left: 20px; /*width: 3880px;*/}
table.site tr.site{ background-color: #DDCCDD; }
th.id_site, td.id_site{ width: 125px; }
td.adresse_installation, th.adresse_installation{
	width: 250px;
}
td.ville_installation, th.ville_installation{
	width: 180px;
}
td.cp_installation, th.cp_installation{
	width: 100px;
}
th.id_site, th.adresse_installation, 
th.ville_installation, th.cp_installation{
	border-bottom: 1px solid black;
}
 
/*div#resultats{
	width	:	3900px;
}*/
 
</style>

Voilà

maintenant tu as une jolie hiérarchie dynamique

N'hésite pas si tu as d'autres questions ! (ps: testé sous ie7 et ff3)

**pontus21** · 10/08/2009, 18h09

Merci pour la solution.

Mais je ne vais même pas la tester ...
Pourquoi ? Parce que je suis obligé d'imbriquer mes tables !
En effet, ici, c'était un exemple simple, dans dans un cas concret, j'ai plusieurs clients et chacun a plusieurs sites ...

Merci quand même d'avoir jeté un coup d'oeil (et même plus). Et je te serais encore plus reconnaissant si tu arrivais à me faire fonctionner ce que je veux !

**lifty** · 10/08/2009, 18h53

Pas de problème cela marche très bien avec plusieurs clients qui ont plusieurs sites!

Voila un exemple avec 2 client avec 2 site chacun (basiquement j'ai fait un C/C et j'ai changé les identifiants pour que jQeury fonctionne correctement.

Le modèle c'est (en m'inspirant de ce que j'ai écrit plus haut)

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
<div class="resultat">
  //1ere hierarchie
  //client
  <div>
      <table 1>
  </div>
  //sites du client
  <div>
      <table 1.1>
      <table 1.2>
  </div>
  //2eme client
  <div>
      <table 2>
  </div>
  //sites du 2eme client
  <div>
      <table 2.1>
      <table 2.2>
  </div>
 
 </div> 
  //fin des resultats

Voilà le code

J'ai mis des commentaires pour que cela soit plus compréhensible
De la même manière tu pourras gérer un autre niveau en dessous de site et ainsi de suite.

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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<html>
	<head>
		<script src="test_fichiers/jquery_003.js" type="text/javascript"></script>
		<script src="test_fichiers/jquery_002.js" type="text/javascript"></script>
		<script src="test_fichiers/jquery.js" type="text/javascript"></script>
	</head>
<body>
 
<script>
                
                $(document).ready(function(){
                        $("table.site").hide();
                        
                        $(".deplier_sites").click(function(){
                                idclient = this.className.split(" ")[1].split("_")[1];
                                if(this.value == '+'){
                                        $(".site.idclient_" + idclient).show();
                                        $(".idclient_" + idclient + ".bouton").attr('value', '+');
                                }else{
                                        $(".site.idclient_" + idclient).hide();
                                }
                                this.value = (this.value == '-') ? '+' : '-';
                        });
                        
                });
        </script>
 
<style>
@CHARSET "UTF-8";
 
 
body{
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        font-family: Arial;
        font-size: 10pt;
}
 
th.bouton, td.bouton{
        width: 40px;
}
 
td.deniere_colonne{
        width: auto;
}
 
/* Affichage des clients */
/*table.client{ width: 3900px;}*/
table.client tr.client{ background-color: #DDDDCC; }
th.id_client, td.id_client{
        width: 120px;
}
th.id_ent, td.id_ent{
        width: 120px;
}
td.nom_entreprise, th.nom_entreprise{
        width: 280px;
}
td.siren, th.siren{
        width: 140px;
}
td.agence, th.agence{
        width: 200px;
}
td.topPme, th.topPme{
        width: 50px;
}
td.topGc, th.topGc{
        width: 50px;
}
 
th.id_client, th.nom_entreprise, th.siren, th.agence, 
th.topPme, th.topGc, th.id_ent{
        border-bottom: 1px solid black;
}
 
/* Affichage des sites */
table.site{ margin-left: 20px; /*width: 3880px;*/}
table.site tr.site{ background-color: #DDCCDD; }
th.id_site, td.id_site{ width: 125px; }
td.adresse_installation, th.adresse_installation{
        width: 250px;
}
td.ville_installation, th.ville_installation{
        width: 180px;
}
td.cp_installation, th.cp_installation{
        width: 100px;
}
th.id_site, th.adresse_installation, 
th.ville_installation, th.cp_installation{
        border-bottom: 1px solid black;
}
 
/*div#resultats{
        width   :       3900px;
}*/
 
</style>
 
<!-- Div de Resultats-->
<div id="resultats">
      <!-- Div qui contiendra le Client 1 -->
      <div>
			<table class="client" border="1">
				<thead>
          <tr class="entetes_client">
  					<th class="bouton center" width="80px">+/-</th>
  					<th class="id_client">Id Client</th>
  					<th class="id_ent">Id Ent</th>
  					<th class="nom_entreprise">Nom Entreprise</th>
  					<th class="siren">SIREN</th>
  					<th class="agence">Agence commerciale</th>
  					<th class="topPme">Top Pme</th>
  					<th class="topGc">Top GC</th>
 
  				</tr>
				<thead>
				<tbody>
  				<tr class="client">
  					<td class="bouton center">
  							<input style="display: inline;" value="+" class="deplier_sites idclient_123456 bouton" type="button">
  					</td>
  					<td class="id_client">123456</td>
  					<td class="id_ent">123456</td>
  					<td class="nom_entreprise">Entreprise XXX</td>
  					<td class="siren">123123</td>
  					<td class="agence">SUD OUEST</td>
  					<td class="topPme">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
  					<td class="topGc">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
 
  				</tr>
  			</tbody>
  		</table>
  	 </div>	
  	 <!-- Div qui contiendra les sites du client 1 -->
     <div>
        <!-- site 1 du client 1 -->
        <table class="site idclient_123456" border="1">			
    						<thead>
                  <tr class="entetes_site">
      							<th class="bouton center">+/-</th>
      							<th class="id_site">Id Site</th>
      							<th class="adresse_installation">Adresse installation</th>
      							<th class="ville_installation">Ville site</th>
      							<th class="cp_installation">CP site</th>
 
    						  </tr>
    						  </thead>
    					  <tbody>
      						<tr class="site idclient_123456">
      							<td class="bouton center">
      									<input style="display: inline;" value="+" class="deplier_installations idsite_456789 idclient_123456 bouton" type="button">
 
      							</td>
      							<td class="id_site">456789</td>
      							<td class="adresse_installation">0000 adresse</td>
      							<td class="ville_installation">ville</td>
      							<td class="cp_installation">75000</td>
      						</tr>
 
  					   	</tbody>
          </table>
          <!-- site 2 du client 1 -->
          <table class="site idclient_123456" border="1">			
    						<thead>
                  <tr class="entetes_site">
      							<th class="bouton center">+/-</th>
      							<th class="id_site">Id Site</th>
      							<th class="adresse_installation">Adresse installation</th>
      							<th class="ville_installation">Ville site</th>
      							<th class="cp_installation">CP site</th>
 
    						  </tr>
    						  </thead>
    					  <tbody>
      						<tr class="site idclient_123456">
      							<td class="bouton center">
      									<input style="display: inline;" value="+" class="deplier_installations idsite_456789 idclient_123456 bouton" type="button">
 
      							</td>
      							<td class="id_site">456789</td>
      							<td class="adresse_installation">0000 adresse</td>
      							<td class="ville_installation">ville</td>
      							<td class="cp_installation">75000</td>
      						</tr>
 
  					   	</tbody>
          </table>
				</div>
			<!-- Div qui contiendra le Client 2 -->
      <div>
			<table class="client" border="1">
				<thead>
          <tr class="entetes_client">
  					<th class="bouton center" width="80px">+/-</th>
  					<th class="id_client">Id Client</th>
  					<th class="id_ent">Id Ent</th>
  					<th class="nom_entreprise">Nom Entreprise</th>
  					<th class="siren">SIREN</th>
  					<th class="agence">Agence commerciale</th>
  					<th class="topPme">Top Pme</th>
  					<th class="topGc">Top GC</th>
 
  				</tr>
				<thead>
				<tbody>
  				<tr class="client">
  					<td class="bouton center">
  							<input style="display: inline;" value="+" class="deplier_sites idclient_123457 bouton" type="button">
  					</td>
  					<td class="id_client">123457</td>
  					<td class="id_ent">123456</td>
  					<td class="nom_entreprise">Entreprise XXX</td>
  					<td class="siren">123123</td>
  					<td class="agence">SUD OUEST</td>
  					<td class="topPme">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
  					<td class="topGc">
  						<input style="display: inline;" disabled="disabled" type="checkbox">
  					</td>
 
  				</tr>
  			</tbody>
  		</table>
  	 </div>	
  	 <!-- Fin sites client 1-->
 
  	 <!-- Div qui contiendra les sites du client 2 -->
     <div>
        <!-- site 1 du client 2 -->
        <table class="site idclient_123457" border="1">			
    						<thead>
                  <tr class="entetes_site">
      							<th class="bouton center">+/-</th>
      							<th class="id_site">Id Site</th>
      							<th class="adresse_installation">Adresse installation</th>
      							<th class="ville_installation">Ville site</th>
      							<th class="cp_installation">CP site</th>
 
    						  </tr>
    						  </thead>
    					  <tbody>
      						<tr class="site idclient_123457">
      							<td class="bouton center">
      									<input style="display: inline;" value="+" class="deplier_installations idsite_456789 idclient_123456 bouton" type="button">
 
      							</td>
      							<td class="id_site">456789</td>
      							<td class="adresse_installation">0000 adresse</td>
      							<td class="ville_installation">ville</td>
      							<td class="cp_installation">75000</td>
      						</tr>
 
  					   	</tbody>
          </table>
          <!-- site 2 du client 2 -->
          <table class="site idclient_123457" border="1">			
    						<thead>
                  <tr class="entetes_site">
      							<th class="bouton center">+/-</th>
      							<th class="id_site">Id Site</th>
      							<th class="adresse_installation">Adresse installation</th>
      							<th class="ville_installation">Ville site</th>
      							<th class="cp_installation">CP site</th>
 
    						  </tr>
    						  </thead>
    					  <tbody>
      						<tr class="site idclient_123457">
      							<td class="bouton center">
      									<input style="display: inline;" value="+" class="deplier_installations idsite_456789 idclient_123456 bouton" type="button">
 
      							</td>
      							<td class="id_site">456789</td>
      							<td class="adresse_installation">0000 adresse</td>
      							<td class="ville_installation">ville</td>
      							<td class="cp_installation">75000</td>
      						</tr>
 
  					   	</tbody>
          </table>
				</div>
				<!-- Fin sites client 2-->
 
 
				<!-- div du client 3 ..... -->
		</div>
 
</body>
</html>

**pontus21** · 10/08/2009, 19h52

J'avais déjà fait ça ... Plusieurs tables.

Mais le soucis c'est quand des données nécessitent un agrandissement d'une cellule en largeur ! Et dans ce cas, les autres lignes ne sont pas décalées !

**pontus21** · 11/08/2009, 09h49

Personne n'a d'idée alors ?

Finalement, mon problème de départ n'est pas forcément la modélisation HTML mais pourquoi sous IE, mes colonnes sont redimensionnées au dépliement alors que sous Firefox ou Chrome, elles ne bougent pas !

Table : Avoir une colonne "extensible"

HTML

Discussions similaires

Partager

Partager