Fixer l'entête d'un tableau

**Immobilis** · 09/06/2006, 13h57

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.

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

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

Merci d'avance.

A+

**SpaceFrog** · 09/06/2006, 14h20

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

**SpaceFrog** · 09/06/2006, 15h45

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

**Immobilis** · 09/06/2006, 22h07

Salut spacefrog,

Envoyé par SpaceFrog

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

Quand je mets

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.

**SpaceFrog** · 10/06/2006, 10h06

redimensionner le header par rapport au body est une autre possibilité en effet ...

**Immobilis** · 10/06/2006, 18h02

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

Fixer l'entête d'un tableau

JavaScript

Discussions similaires

Partager

Partager