Affichage d'une table avec ascenseurs
J'ai une table d'agents avec leur identifiant, nom prénom etc.
Je l'affiche de cette façon :
Code:
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:
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.
