Discussion :

[Sanaa25]

Bonjour,

Dans un onglet composé de deux tables (une pour l'entête et une pour le corps du traitement formulaire), j'ai besoin de fixer la première table de l'onglet et appliquer un scrolling à la 2ème table sans avoir à l'appliquer sur tout l'onlget.

Je suis novice en javascript et j'ai beau essayer les différents solutions vu sur le net, mais aucune ne marche.

Merci d'avance pour vos messages

[SpaceFrog]

rien à voir avec js

met le second table dans un div de hauteur fixe en overflow auto ...

[Sanaa25]

Genre:

Code :

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

1
2
3
<div style="overflow:auto;" ><TABLE>
....
</table></div>

Sans déclaration css???

[SpaceFrog]

???
tu peux l'intégrer dans le css..

[Sergejack]

Ça ne fonctionnera pas avec IE.

Quant aux navigateurs compatible : la barre de défilement étant à l'intérieure de TBODY, la place qu'elle occupera risque d'écraser tes cellules.

Dans l'état actuel des choses ce que tu souhaites faire est un casse-tête.

Tu devrais faire deux tables ayant une mise en page figé (fixed-layout), la première pour l'entête et la suivante pour le corps.
Et dont toutes les colonnes ont une taille fixe (sinon la dernière colonne).

J'ai fait ça là :
http://demo.mygolf.be/Pages/Client/F...aspx?skinid=27
Login: X005
Password: 1234

[SpaceFrog]

Ça ne fonctionnera pas avec IE.

pour quelle raison ??
un div en overflow est crossbrowser ...

[Sergejack]

pour quelle raison ??
un div en overflow est crossbrowser ...

J'avais retenu un tbody en overflow (qui ne passe pas sous IE).
Désolé.

[SpaceFrog]

ha si seulement le thead ...

[Sanaa25]

Finalement ça a marché en implémentant le style:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<style><!--
        .centre
            {
 
                height: 550px;
                overflow-y:auto;
            }
</style>
//-->

En suite en encadrant la table par:

Code :

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

1
2
3
<div class="centre">
	 <TABLE ID="Table1">...</table>
</div>