Affichage d'une table avec ascenseurs

**Maxiglider** · 16/01/2009, 16h52

J'ai une table d'agents avec leur identifiant, nom prénom etc.

Je l'affiche de cette façon :

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
<table class="table">
 
<tr>
	<!-- ici je met tous les noms des champs (utilisation de <th>) -->
</tr>
 
<div class="listOfAgents">
 
<!-- pour chaque agent : -->
	<tr>
   		<!-- affichage de chacun des champs (utilisation de <td>) -->
	</tr>
<!-- fin pour chaque agent -->
 
</div>
 
</table>

Je désire que la table prenne la moitié de la hauteur de la fenêtre, et toute sa longueur. (la balise <body> sans style contient la table)
Je veux qu'il y ait un ascenseur pour faire défiler les agents, mais que la première ligne du tableau (celle contenant les noms des champs) reste toujours affichée.

Ma feuille de style est la suivante :

Code css :

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
.table      /* hauteur table : 50%    hauteur du contenu de table : hauteur ligneEntetes + hauteur agentsListe */
{
	display: block;
	width: 100%;
	height: 50%;
	overflow: auto; 
	font-size: 9pt;
	margin-bottom: 15px;
}
 
.listOfAgents      /* hauteur agentsListe : 80% de la table */
{
	display: block;
	height: 80%;
	width: 100%;
	overflow: auto;
}

Voici le résultat au niveau affichage :

Sur Mozilla Firefox :
La table est déplacée comme avec un top: 80%
La taille de la table est bien la bonne.
Il y a un ascenseur pour faire défiler toute la table, la première ligne n'est donc pas fixe.

Sur Internet Explorer :
La table s'affiche de façon classique comme si les styles n'étaient pas définis.

Je pense que le problème vient de la définition du style de .listOfAgents.
Lorsqu'on supprime sa définition, l'affichage est le même sauf que la table n'est pas déplacée.

Merci de votre aide.

**HiRoN** · 16/01/2009, 20h07

Salut,

Sauf erreur de ma part, le code que tu donnes n'est syntaxiquement pas valide.
Tu peux à la limite, intégrer un <div> dans un <td> (et cela n'est sémantiquement pas correct) mais pas dans un <tr>.

En gros :

Code HTML :

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

1
2
3
4
5
6
7
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>

Au niveau du tableau (sans parler du placement de celui-ci) :
Pourquoi ne pas créer un table indépendant pour l'affichage des colonnes et un autre (englobé d'un div pour le scroll) gérant l'affichage des données ?

**Maxiglider** · 19/01/2009, 09h25

D'accord, merci. J'ai pensé à cette solution mais le problème c'est que la largeur des colonnes du tableau des entêtes ne seront pas la même que celles des colonnes du tableau des données... mais ça doit être réglable par javascript. Autre problème, si la largeur du tableau dépasse celle des l'écran, il y aura deux barres de défilement horizontales :/

Affichage d'une table avec ascenseurs

HTML

Vue hybride

Discussions similaires

Partager

Partager