Fixer l'entête d'un tableau

Version imprimable

09/06/2006, 13h57
Immobilis

Fixer l'entête d'un tableau

Bonjour,

Voici un lien vers un code de spacefrog. Il explique comment faire pour avoir un header de tableau fixe avec un ascenseur.
Comme ce ne serait pas poli de le harceler par mp et que cela peut vous intéresser, je poste ma question ici.

Citation:

Quand on redimensionne la fenêtre la taille des colonnes n'est plus en phase avec le header. Il faut pour cela faire un refresh de la page. Quand il y a des une base de données derrière, c'est un peu génant.
A ton avis serait-il possible d'utiliser le "onResize" de la balise <body> pour redimensionner le tableau?

Sa réponse

Citation:

ben oui suffit de lancer la fonction de redim des colonnes sur le onresize non ?
j'ai pas testé mais ça devrait le faire

"fonction de redim des colonnes". J'avoue que je vois pas trop :oops:

Merci d'avance.

A+
09/06/2006, 14h20
SpaceFrog

en fait il faut juste faire une focntion qui ne fait que le redim des colonnes ...

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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>one</title>
<style type='text/css'>
td.headcol {width:auto;}
</style>
<script type='text/javascript'>
var HeaderColWidths = new Array();
function resizeCols(){
						 for(i=0;i<4;i++){
			 HeaderColWidths.push(document.getElementById('col'+(i+1)).offsetWidth-5+"px" ); }
 
  						 var BodyTds=document.getElementById('tablebody').getElementsByTagName('td')
  				        for(i=0;i<BodyTds.length;i++){
  				        				BodyTds[i].style.width=HeaderColWidths[i%4];
										}
 }
 
 
 
 
</script>
</head>
 
<body onload="resizeCols()" onresize="resizeCols()">
<div style="width:100%;overflow:hidden;">
<table border="1" style="width:100%;" id="header">
<tr colspan=5>
	<td class='headcol' id='col1'>one</td> 
	<td class='headcol' id='col2'>two</td> 
	<td class='headcol' id='col3'>three</td> 
	<td class='headcol' id='col4'>four</td>
   <td style="width:10px;">&nbsp;</td>
</tr>
</table>
<div>
 
<div style="width:100%;height:200px;overflow:auto;">
<table border="1" style="width:100%;" id="tablebody">
<script type='text/javascript'>
for (i=0;i<55;i++){
document.write("\<tr\>\<td\><div style='overflow:hidden' \>one\<\/div>\<\/td\>\<td \>two\<\/td\>\<td \>three\<\/td\>\<td \>four\<\/td\>\<\/tr\>")
}
</script>
</table>
<div>
 
</body>
 
</html>

seul souci si le contenu de la cellule force une largeur supérieure ...
le td n'acceptant pas un overflow auto ... il faudra sasn douter mettre un div dans chaque td ...

09/06/2006, 22h07
Immobilis

Salut spacefrog,

Citation:

Envoyé par SpaceFrog

le td n'acceptant pas un overflow auto ... il faudra sasn douter mettre un div dans chaque td ...

Quand je mets

Citation:

oneoneoneoneoneoneoneoneoneoneoneoneone

Dans le <DIV> de la première cellule ça l'elargie qd mm.
Ne serait-il pas préférable de redimensionner le header en fonction des <TD>?

Je viens de trouver ici un exemple pas mal du tout. Mais pour décripter!

A+

NB Le lien était mauvais.:aie:
10/06/2006, 10h06
SpaceFrog

redimensionner le header par rapport au body est une autre possibilité en effet ...
10/06/2006, 18h02
Immobilis

J'me suis trompé sur le lien http://www.webreference.com/programm...mn4/index.html