[Reyzolu] Tableau de données et height td 100%

Chalut

En ce moment je travaille sur un webform. Pour afficher des données de type listing j'ai recours à une balise table où chaque row a une hauteur fixée en CSS. Cette table est injectée dans un div dont la hauteur est de 100%, lui-même à l'intérieur d'un div à hauteur figée en Javascript. J'ai donc une structure qui pourrait ressembler à ceci:

<div id="main">
  <div class="data">
    <table cellspacing="0" class="data-table">
      <tr><td>col1</td><td>col2</td>...
      <tr><td>col1</td><td>col2</td>...
      ...
      <tr class="data-table-selected"><td>col1</td><td>col2</td>...
      ...

Lorsque l'utilisateur mouseup sur une row, celle-ci se dote de la classe "data-table-selected" telle que:

#main
{
  width: XXpx; // ajusté en JS
  height: XXpx; // ajusté en JS
}

.data,
.data-table
{
  width: 100%;
  height: 100%;
}

.data-table td
{
  height: 25px;
}

.data-table .data-table-selected td
{
  height: 100%;
}

Le but de l'attribue height à 100% de la classe "data-table-selected" est de forcer la row sélectionnée à occuper tout l'espace vertical restant dans la table. Soit quelque chose comme ceci:

|------------ main
||---------- table
||tr
||----------
||tr sélectionnée
||
||
||
||----------
||tr
||---------- /table
|----------- /main

Je précise que je suis en XHTML 1.1. FF, Opera, Safari (Chrome) m'affichent correctement ce comportement. Quant à IE (7/8), il affiche la row sélectionnée de telle sorte qu'elle occupe tout l'espace vertical (un vrai height 100%) de la table, ce qui explose totalement le design:

|------------ main
||---------- table
||tr
||----------
||tr sélectionnée
||
||
||
||
||
||
|------------ /main
|----------
|tr
|---------- /table

Je ne peux malheureusement pas donner de lien ou faire de screen... J'aimerais juste savoir si ce comportement est connu et dispose d'une solution.

Merci
Modifié par Ze Nenex (29 Aug 2009 - 10:35)

Me réponds tout seul
Mettre le height sur les TR, non pas sur les TD:

.data-table td 
{ 
  height: 25px; 
} 
 
.data-table .data-table-selected td 
{ 
  height: 100%; 
}

.data-table
{ 
  height: 25px; 
} 
 
.data-table .data-table-selected
{ 
  height: 100%; 
}

Si quelqu'un sait pourquoi ça change la façon dont IE interprète les hauteurs en mode strict, je prends.