Coller l'ascensseur a la table

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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>

17/11/2009, 13h11
sebhm

Bonjour,

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

si tu fais

Code:

width:100%

dans ta table, ca fait ce que tu veux ?

Un truc comme ceci, ça t'irait? :)

Code:

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>

Ah oui c'est sympa.

Mais je ferais plus simple que le javascript :

Code:

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 !

17/11/2009, 15h29
malabarbe

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.
17/11/2009, 15h54
Lcf.vs

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é. ;)
17/11/2009, 16h33
malabarbe

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 !
17/11/2009, 17h07
malabarbe

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.

J'ai modifié :
Code:

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

17/11/2009, 17h34
Lcf.vs

Tu as une erreur dans ton code:

c'est

Code:

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

et non

Code:

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

;)
17/11/2009, 17h44
malabarbe
Non, j'ai modifié
Code:

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
17/11/2009, 17h59
Lcf.vs

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:

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

par

Code:

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... ;)
17/11/2009, 18h24
sebhm

Citation:

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 ... 8O
17/11/2009, 18h43
Lcf.vs

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? :)

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

Voilà ou j'en suis :

Code:

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>

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

Code:

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

Bonsoir

Et si tu essayais un display:inline-block ?

Code:

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...

17/11/2009, 23h04
malabarbe

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 ?
17/11/2009, 23h18
12monkeys

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...
17/11/2009, 23h21
malabarbe

Oui, j'en suis arrivé moi aussi a cette conclusion.

Merci pour le source.

Je laisse le post actif au cas ou un visiteur
aurai une idée.

@ +

Voir 40 message(s) de cette discussion en une page