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

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

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

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.

@ +

**sebhm** · 18/11/2009, 11h03

non pas que je veuille avoir raison à tout prix

mais je comprends pas bien ce qui t'embete dans 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
<html>
<head>
<style type="text/css">
div.scroll
{
width : 500px;
height:100px;
overflow:auto;
}
#la_table {
border : 1px solid black;
width:100%;
}
#la_table td {
border : 1px solid black;
}
</style>
</head>
 
<body>
 
<div id="le_div" class="scroll">
<table id="la_table">
<tr>
 <th>COL 1</th>
 <th>COL 2</th>
 <th>COL 3</th>
</tr>
<tr>
 <td>cell 11 bla bla bla bla bla bla</td>
 <td>cell 12</td>
 <td>cell 13</td>
</tr>
<tr>
 <td>cell 21  bla bla bla bla bla bla  bla bla bla bla bla bla</td>
 <td>cell 22</td>
 <td>cell 23</td>
</tr>
<tr>
 <td>cell 31  bla bla bla bla bla bla</td>
 <td>cell 32</td>
 <td>cell 33</td>
</tr>
<tr>
 <td>cell 41  bla bla bla bla bla bla</td>
 <td>cell 42</td>
 <td>cell 43</td>
</tr>
</table>
</div>
</body>
</html>

la seule différence avec l'utilisation du inline-block, c'est qu'il faut spécifier la largeur du DIV. C'est ce que tu ne veux pas ? Ton DIV (et donc ton tableau) pourra avoir une largeur tres faible comme prendre toute ta page, c'est ce que tu voulais ?

En tout cas, c'est bien que tu n'ais pas besoin de Javascript, inutile à mon sens. Avec la propriété CSS Overflow, tu t'en sors.

Coller l'ascensseur a la table

HTML

Vue hybride

Discussions similaires

Partager

Partager