Coller l'ascensseur a la table

**malabarbe** · 16/11/2009, 19h00

Bonsoir à tous,

J'ai une table pouvant contenir des données
de longueurs diverses

Comment faire pour que l'ascensseur a droite
de la table soit toujours collé a celle-ci ?

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
 
<html>
<head>
</head>
<body>
<div align="center" style="height:82px;overflow:auto;width:auto;"> 
	<table height ="83" border="5" id="table1" style="width:auto">
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
	</table>
</div>
</body>
</html>

**sebhm** · 17/11/2009, 12h11

Bonjour,

je ne suis pas sur de bien comprendre ce que tu veux dire.

si tu fais

Code :

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

width:100%

dans ta table, ca fait ce que tu veux ?

**Lcf.vs** · 17/11/2009, 13h41

Un truc comme ceci, ça t'irait?

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
<html>
<head>
<style type='text/css'>
* table{visibility:hidden;}
#div_table{position:absolute;padding:0 17 0 0;height:82px;overflow:auto;}
#centrage{position:relative;}
</style>
<script type='text/javascript'>
function RESIZER(){
  var mem=0;
  var i=0;
  while(document.getElementsByTagName('*')[i]){
   if((document.getElementsByTagName('*')[i].tagName=='TD'||document.getElementsByTagName('*')[i].tagName=='TH')&&document.getElementsByTagName('*')[i].offsetWidth>mem){
    mem=document.getElementsByTagName('*')[i].offsetWidth;
   }
   i++;
  }
  i=0;
  while(document.getElementsByTagName('*')[i]){
   if(document.getElementsByTagName('*')[i].tagName=='TD'||document.getElementsByTagName('*')[i].tagName=='TH'){
    document.getElementsByTagName('*')[i].style.width=mem+'px';
   }
   i++;
  }
   document.getElementById('table2').style.width=document.getElementById('table1').offsetWidth+'px';
   document.getElementById('centrage').style.left=Math.ceil((document.body.offsetWidth-document.getElementById('table2').offsetWidth)/2)+'px';
   document.getElementById('centrage').style.bottom=Math.ceil(document.body.offsetHeight-(document.getElementById('table2').offsetHeight-document.getElementById('table1').offsetHeight)*2)+'px';
   document.getElementById('table1').style.visibility='visible';
   document.getElementById('table2').style.visibility='visible';
  }
 </script>
</head>
<body onload=RESIZER()>
 <div id='centrage'>
  <table id=table1 border="1">
   <tr>
    <th>
     Colonne 1
    </th>
    <th>
     Colonne 2
    </th>
    <th>
     Colonne 3
    </th>
    <th>
     Colonne 4
    </th>
   </tr>
  </table>
   <div id=div_table> 
    <table id=table2 border="1">
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

**sebhm** · 17/11/2009, 14h15

Ah oui c'est sympa.

Mais je ferais plus simple que le javascript :

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
<html>
<head>
<style type="text/css">
div.scroll
{
height:100px;
overflow:scroll;
}
table {
width : 100%;
border : 1px solid black;
}
table td {
border : 1px solid black;
}
</style>
</head>
 
<body>
 
<div class="scroll">
<table>
<tr>
 <th>COL 1</th>
 <th>COL 2</th>
 <th>COL 3</th>
</tr>
<tr>
 <td>cell 11</td>
 <td>cell 12</td>
 <td>cell 13</td>
</tr>
<tr>
 <td>cell 21</td>
 <td>cell 22</td>
 <td>cell 23</td>
</tr>
<tr>
 <td>cell 31</td>
 <td>cell 32</td>
 <td>cell 33</td>
</tr>
<tr>
 <td>cell 41</td>
 <td>cell 42</td>
 <td>cell 43</td>
</tr>
</table>
</div>
</body>
</html>

vu sur W3Schools !

**malabarbe** · 17/11/2009, 14h29

Bonjour,

Merci a vous deux pour les réponses

Pour le code de : Wapper, rien ne s'affiche

Pour le code de sebhm, on reviens au début du problème
a savoir que le contenu des celulles n'a pas toujours la
mème longueur c'est a dire que chaque colonne prendra
la largeur de la celllule la plus large dans celle-ci.

Donc ne pas forcer le Width.

Si on ne force pas le width et que l'on centre la table,
l'ascensseur ne colle plus a celle-ci !

Retour au point de départ.

**Lcf.vs** · 17/11/2009, 14h54

Mon code n'affiche rien???

Chez moi, ça marche tant sous IE que FX...

En fait, les tableaux sont rendus invisibles en css, le temps que les données arrivent et que les cellules soient dimensionnées, ensuite, ils sont rendus visibles par javascript...

Donc si ça n'affiche rien chez toi, c'est que ton javascript est sûrement désactivé.

**malabarbe** · 17/11/2009, 15h33

Je n'avais pas déclaré le Doctype !

Cela s'affiche bien maintenant, mais si je
renomme Colonne 2 en Col 2, les largeurs des colonnes
restent fixes.

Alors que c'est la largeur des cellules qui doit forcer
la largeur !

**malabarbe** · 17/11/2009, 16h07

Si, j'ai bien testé entre deux

Cela fonctionne bien

Une seule ombre au tableau (si je puis dire !)

C'est quand une celulle dans une colonne donnée prends
une largeur de 120px, toutes les colonnes sont affectées
et prennent la mème largeur.

C'est le seul truc qu'il reste a voir
tu a peut être une idée

certainement une RAZ d'une variable mais je ne
maitrise pas JavaScript.

**malabarbe** · 17/11/2009, 16h12

J'ai modifié :

Code :

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

1
2
3
4
5
 
  while(document.getElementsByTagName('*')[i]){
   if(document.getElementsByTagName('*')[i].tagName=='TD'||document.getElementsByTagName('*')[i].tagName=='TH'){
    document.getElementsByTagName('*')[i].style//.width=mem+'px';
   }

Maintenant, c'est ok pour la largeur de chaque colonne

Seul la ligne des entêtes ne ce redimentionne pas

**Lcf.vs** · 17/11/2009, 16h34

Tu as une erreur dans ton code:

c'est

Code :

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

document.getElementsByTagName('*')[i].style.width=mem+'px';

et non

Code :

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

document.getElementsByTagName('*')[i].style//.width=mem+'px';

**malabarbe** · 17/11/2009, 16h44

Non, j'ai modifié

Code :

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

1
2
 
document.getElementsByTagName('*')[i].style;  //.width=mem+'px';

Ceci permet d'éviter le redimentionnement des colonnes
avec la mème valeur.
Donc elles s'ajustent chacunnes a la dimention de la celulle la plus large

Et cela marche bien (grace a toi).

Le seul bémol qu'il reste, c'est de faire pareil
avec la ligne d'entête mais je n'arrive pas a adapter

**Lcf.vs** · 17/11/2009, 16h59

Ben, ce que tu es modifié le rend non-valide...

De plus, c'est justement cette fonction qui modifie les entêtes...

tu peux, si tu veux, à la place, modifier les

Code :

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

document.getElementsByTagName('*')[i].tagName=='TD'||document.getElementsByTagName('*')[i].tagName=='TH'

par

Code :

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

document.getElementsByTagName('*')[i].tagName=='TH'

Ce qui modifiera tes entêtes, néanmoins, tu risques de te retrouver, en fonction des données, avec des entêtes plus larges que tes colonnes...

Ma fonction, telle que je te l'ai postée, uniformise le tout, si tu veux éviter le problème dont je viens de t'avertir et sans uniformiser le tout, faut développer cellule par cellule, donc passer par des données en xhr mais, pour ça, j'ai vraiment pas le temps de le faire à ta place, désolé, mais cherche à l'apprendre toi-même, en creusant autour de ce que je t'ai donné, j'ai appris ainsi et ça va très vite...

**sebhm** · 17/11/2009, 17h24

Pour le code de sebhm, on reviens au début du problème
a savoir que le contenu des celulles n'a pas toujours la
mème longueur c'est a dire que chaque colonne prendra
la largeur de la celllule la plus large dans celle-ci.

Donc ne pas forcer le Width.

je suis désolé mais je ne comprends pas ce que tu veux...
le width=100% pour la table permet d'occuper tout le div, apres, tu peux faire ce que tu veux pour chaque colonne ...

**Lcf.vs** · 17/11/2009, 17h43

En fait, si j'ai bien compris, il souhaite avoir ses colonnes qui aient une largeur adaptée au contenu de celle-ci, individuellement, sans avoir à connaître à l'avance l'espace que les données vont y prendre et que les entêtes se régulent dessus, tout en sachant que ces entêtes ne peuvent pas être dans le même tableau puisqu'il veut, au défilement des lignes, que ces entêtes soient toujours visibles...

C'est pourquoi je dis que ça demande un script un chouïa plus complexe et que je n'en ai pas le temps...

As-tu mieux compris ses attentes?

**malabarbe** · 17/11/2009, 17h52

Oui, c'est tout a fait cela
------------------------

Voilà ou j'en suis :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<style type='text/css'>
* table{visibility:hidden;}
#div_table{position:absolute;padding:0 17 0 0;height:82px;overflow:auto;}
#centrage{position:relative;}
</style>
<script type='text/javascript'>
function RESIZER(){
  var mem=0;
  var i=0;
  while(document.getElementsByTagName('*')[i]){
   if((document.getElementsByTagName('*')[i].tagName=='TH'||document.getElementsByTagName('*')[i].tagName=='TH')&&document.getElementsByTagName('*')[i].offsetWidth>mem){
    mem=document.getElementsByTagName('*')[i].offsetWidth;
   }
   i++;
  }
  i=0;
  while(document.getElementsByTagName('*')[i]){
   if(document.getElementsByTagName('*')[i].tagName=='TD'||document.getElementsByTagName('*')[i].tagName=='TH'){
    document.getElementsByTagName('*')[i].style.width=mem+'px';
   }
   i++;
  }
   document.getElementById('table2').style.width=document.getElementById('table1').offsetWidth+'px';
   document.getElementById('centrage').style.left=Math.ceil((document.body.offsetWidth-document.getElementById('table2').offsetWidth)/2)+'px';
   document.getElementById('centrage').style.bottom=Math.ceil(document.body.offsetHeight-(document.getElementById('table2').offsetHeight-document.getElementById('table1').offsetHeight)*2)+'px';
   document.getElementById('table1').style.visibility='visible';
   document.getElementById('table2').style.visibility='visible';
  }
 </script>
</head>
<body onload=RESIZER()>
 <div id='centrage'>
  <table id=table1 border="1">
   <tr>
    <th>
     Col 1
    </th>
    <th>
     Colonne 2
    </th>
    <th>
     C 3
    </th>
    <th>
     Colonne 4
    </th>
   </tr>
  </table>
   <div id=div_table> 
    <table id=table2 border="1">
     <tr>
      <td>
       &nbsp;111
      </td>
      <td>
       &nbsp;22jhkhhkhkkjhjkhkjh222
      </td>
      <td>
       &nbsp;888888888
      </td>
      <td>
       &nbsp;hkjhkjhkhkjhlkjhkjhkjhkljhkljhlkjh151456  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

**malabarbe** · 17/11/2009, 20h40

Bon, j'ai réussi a faire quelque chose qui tourne
et sans JavaScript.

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Col 1</title>
</head>
<body>
<CENTER>
<table align="center">
<tr>
<td>
<table border="1" style="border-collapse:collapse">
<tr>
<td>
    <th>
     Col 1
    </th>
    <th>
     Colonne 2
    </th>
    <th>
     C 3
    </th>
    <th>
     Colonne 4
    </th>
</tr>
</td>  
</table>  
 
<div align="right" style="height:60px;overflow:auto;">
<table height ="60" border="1" style="font-family: Times New Roman; font-size: 12px; border-collapse:collapse;width:-100px;">
     <tr>
      <td>
       &nbsp;111
      </td>
      <td>
       &nbsp;22jhkhhkhkkjhjkhkjh222
      </td>
      <td>
       &nbsp;888888888
      </td>
      <td>
       &nbsp;hkjhkjhkhkjhlkjhkjhkjhkljhkljhlkjh151456  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;1
      </td>
      <td>
       &nbsp;2
      </td>
      <td>
       &nbsp;3
      </td>
      <td>
       &nbsp;4 
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
     <tr>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;
      </td>
      <td>
       &nbsp;  
      </td>
     </tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

Il reste seulement a gérer les largeurs des colonnes de la ligne d'entête

**12monkeys** · 17/11/2009, 21h56

Bonsoir

Et si tu essayais un display:inline-block ?

Code :

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

1
2
3
4
5
6
7
8
9
<div align="center" style="height:82px;overflow:auto;display:inline-block;width:auto;"> 
	<table height ="83" border="5" id="table1" style="width:auto">
		<tr><td>dfgdfgk lmdfkglm kdfgl kdfmlg kdmflkg mldfk gml</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
	</table>
</div>

Ca ne passera pas sur les navigateurs les plus vieux, tout dépend de tes besoins, sinon rechercher sur le net les alternatives à inline-block...

**malabarbe** · 17/11/2009, 22h04

Merci 12monkeys,

Cela est hyper simple et tourne très bien.

Saurait-tu comment afficher au dessus de la table,
une ligne d'entêtes qui respecte la largeur des
colonnes ?

**12monkeys** · 17/11/2009, 22h18

Je ne pense pas que ce soit possible en HTML/CSS sans créer 2 tableaux différents et donc on aura le problème du respect de la largeur de colonnes...

En javascript peut être mais comme je maitrise pas...