Discussion :

[Deciprog]

Bonjour,

J'ai un petit souci avec un tableau qui est dimensionné automatiquement en largeur avec une ascenseur.

Et voici le code

CSS

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
.tableau{
	background-color: #F8F8F8;
	width:100%;
	border-style:solid;
	border-width:1px;
	border-color:54ABC6;
}
 
div#tableau_scrollbar{
	height: 370px;
	overflow:auto;
}
 
.tableau_entete{
	background-image:url(tableau_entete.png);
	color: #FFFFFF;
}

HTML

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
<div id='tableau_scrollbar'>
	<table class='tableau'>
		//entête
		<tr>
			<th class='tableau_entete'>Salaire</th>
			<th class='tableau_entete'>Fonction</th>
			<th class='tableau_entete'>CA</th>
			<th class='tableau_entete'>+</th>
		</tr>
		//ligne 1
		<tr bgcolor="#F8F8F8">
			<td>1 841</td>
			<td>Commercial</td>
			<td>12 000</td>
		</tr>
		//ligne 2
		<tr bgcolor="#EAEAEA">
		...

Je voudrais que l'entête de mon tableau ne disparaisse pas quant je descend l'assenseur.
Il faudrait une fonction du style : "<tr fixe><th class='tableau_entete'>"

Etant donné qu'une capture d'écran est plus parlant que du texte voici l'image mon problème (document attaché)


Merci d'avance

[pop_up]

Une petite recherche m'a renvoyé vers ceci :
http://www.developpez.net/forums/d46...u-entete-fixe/

et plus précisément vers :
http://www.imaputz.com/cssStuff/bigFourVersion.html

Dis moi si ça te convient

[Deciprog]

Merci pour l'aide.

Le lien "http://www.imaputz.com/cssStuff/bulletVersion.html" est le tableau que je veux mais le problème c'est que mon tableau à un width:100% en largeur. Les colonnes ne son donc pas en taille fixe.

Comment faire d'après mon code ?

Merci

[desert]

Le problème sur ce genre de tableau étirable, c'est le scrollbar :
Comme il a une largeur fixe et qu'il est uniquement visible dans le corps de la table, il risque d'y avoir un décalage entre les cellules de l'en-tête et du corps. Le seul moyen que je vois, c'est de passer par du Javascript.

[Deciprog]

c'est ce que je constate aussi. Utiliser Javascript c'est pas super, il y a t-il un autre moyen plus simple car la c'est vraiment embêtant.

Pour le Javascript il y a t-il un code d'exemple, merci

[voleurdecarottes]

Ce que tu peux faire, sans javascript, c'est tout simplement d'avoir 2 div: un div pour le titre, et un div juste en dessous pour les données (qui engloberait ton tableau actuel). Par contre cela impose de fixer toi-même au départ les largeurs des différentes colonnes. C'est faisable si on trouve toujours à peu près les mêmes données dans ton tableau.