Table : Avoir une colonne "extensible"

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

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, 14h00

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, 14h16

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, 14h49

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, 14h55

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, 15h45

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.

Table : Avoir une colonne "extensible"

HTML

Vue hybride

Discussions similaires

Partager

Partager