HTML Tableau déroulant verticalement et horizontalement

Question

Je pensais que j'avais à l'origine réalisé ceci, mais la méthode que j'ai employée n'était pas correcte. J'ai séparé la tête de la table et les données de la table en deux tables distinctes, chacune fermée dans un div. Je place ensuite le débordement sur le div extérieur de chaque segment de table. Cependant, cela ne fonctionne pas parce que quand j'ai un grand nombre de colonnes, il commence à serrer les colonnes ensemble, alors que je les veux toujours une largeur fixe. Quelqu'un peut-il aider? J'ai omis les écouteurs d'événement dans le code ci-dessous.

<div id='HeaderTable' style='overflow:auto;overflow-x:hidden;overflow-y:scroll;width:900px;'> 
    <table border='1' style='width:1900px;float:left;'> 
     <thead style='text-align:left;'> 
      <tr style='display:block;'> 
       <th width='100' style='width:100px;'>test1</th> 
       <th width='100' style='width:100px;'>test2</th> 
       <th width='100' style='width:100px;'>test3</th> 
       <th width='100' style='width:100px;'>test4</th> 
       <th width='100' style='width:100px;'>test5</th> 
       <th width='100' style='width:100px;'>test6</th> 
       <th width='100' style='width:100px;'>test7</th> 
       <th width='100' style='width:100px;'>test8</th> 
       <th width='100' style='width:100px;'>test9</th> 
      </tr> 
     </thead> 
    </table> 
</div> 

<div id='DataTable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;> 
    <table border='1' style='width:1900px;float:left;'> 
     <tbody id='ClearDetails'> 
      <tr id='Row0' style='color:black;height:auto;display:block;'> 
       <td style='width:100px;'>1</td> 
       <td id='Row0Col0' style='width:100px;'>1625</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
       <td id='Row0Col0' style='width:100px;'>25</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 1

Tout d'abord, vous ne pas se séparer en deux divs différents: Vérifiez la Pure CSS Table with Fixed Header. Deuxièmement, pourquoi la table avec un emplacement est répertoriée comme 1900 et dans un autre ensemble vers 900? Troisièmement, avez-vous désactivé les marges et le remplissage pour vous assurer que les blocs sont réellement 100px? Enfin, dans IE, vous devez tenir compte de la largeur de la barre de défilement. Vous devrez donc réduire la taille de chaque colonne ou augmenter la largeur de la table pour l'adapter à la largeur de la barre de défilement.