CSS Table d'en-têtes fixe dans ie

Question

quelqu'un peut-il m'aider à créer des en-têtes fixes sur une table en utilisant css seulement (pas de js). Il doit prendre en charge les données dynamiques car les tailles de colonnes proviennent d'une base de données. Seulement besoin de travailler dans ie7/8. Cheers

Answer 1

Si vous décidez d'aller avec JS (comme je suis sûr que ce n'est guère possible avec CSS pure), vous pouvez essayer mon script. Voir un . C'est un navigateur croisé et optimisé pour les performances.

Answer 2

Il me semble que vous essayez de créer une table où vous pouvez faire défiler la partie du corps et faire en sorte que la première rangée (d'en-tête) ne bouge pas. Cela peut être fait en ayant une table avec la ligne d'en-tête, et une seconde placée à l'intérieur d'un <div style="max-height: 400px; overflow: auto;"> - notez que cela ne fonctionnera qu'avec des colonnes de largeur fixe, sauf si vous utilisez JavaScript.

Si ce n'est pas ce que vous essayez d'atteindre, veuillez ne pas tenir compte de ce message.

Answer 3

Voilà donc ce que je pensais:

<table> 
    <thead> 
     <tr> 
      <th>Value</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     <tr><td>1</td></tr> 
     </tr> 
    </tbody> 
</table> 

tbody { 
    max-height:100px; 
    overflow:auto; 
    position:absolute; 
} 
tr td:last-child { /* do horizontal scrollbar useless */ 
    padding-right:1em; 
} 

EDIT: Raaah il fonctionne sur IE8 mais pas IE7 (testé avec IE9 bêta), il semble IE7 applique la règle de hauteur <td> éléments!