Comment créer une table défilante dans Google Chrome

Question

Ok, donc c'est essentiellement sur les tables déroulantes. Si j'ai un élément de table, je peux faire défiler le contenu (avec un peu de javascript, y compris la barre de défilement en utilisant la largeur) en faisant la hauteur fixe et la hauteur fixe, puis en passant en mode automatique sur le tbody.

Ceci fonctionne dans Firefox, mais dans google chrome les hauteurs sur le th/tbody sont ignorées et la table entière se développe contre le défilement comme prévu.

Y a-t-il une solution css qui peut être appliquée à la table pour que cela fonctionne également dans Google Chrome? Ou dois-je créer l'en-tête une table, le corps une table différente, assurer la largeur des colonnes en utilisant js ou css et faire défiler le parent de la table de corps avec son contenu?

Answer 1

Voici une solution complète qui devrait fonctionner (en utilisant jQuery) Vous aurez besoin de deux tables chacune dans un élément div séparé. Chaque table aura la même section de thead. Seul contentTable aura la section tbody

<div class="scrollableTable" 
    <div> 
     <table class="headerTable"> 
      <thead> 
       <tr> 
        <th>Column 1</th> 
        <th>Column 2</th> 
        <th>Column 3</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
    <div style="height:240px; overflow:auto;"> 
     <table class="contentTable" style="width:100%; margin-top:-20px;"> 
      <thead> 
       <tr> 
        <th>Column 1</th> 
        <th>Column 2</th> 
        <th>Column 3</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>value 1</td> 
        <td>value 2</td> 
        <td>value 3</td> 
       </tr> 
       <tr> 
        <td>value 4</td> 
        <td>value 5</td> 
        <td>value 6</td> 
       </tr> 
       .... 
      </tbody> 
     </table> 
    </div> 
</div> 

Ensuite, vous devrez appeler cette fonction à chaque fois que les données sont modifiées:

ResizeWidths($('.scrollableTable')); 


function ResizeWidths(div) 
{ 
    var headerCells = $(div).find('.headerTable thead').find('th'); 
    var contentCells = $(div).find('.contentTable thead').find('th'); 
    for(var i =0, ii = headerCells.length;i<ii;i++) 
    { 
     if($(headerCells[i]).width()!=$(contentCells[i]).width()) 
      $(headerCells[i]).width($(contentCells[i]).width()); 
    } 
} 

Answer 2

Je suppose que vous utilisiez le script de la page

suivant

Afin de corriger le bug se produisant dans le Chrome changer les lignes suivantes:

if (document.all && document.getElementById && !window.opera) this.initIEengine(); 
    if (!document.all && document.getElementById && !window.opera) this.initFFengine(); 

à ceci:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 
    if (is_chrome = true) { 
     this.initIEengine() 
    } 
    else { 
     if (document.all && document.getElementById && !window.opera) this.initIEengine(); 
     if (!document.all && document.getElementById && !window.opera) this.initFFengine(); 
    } 

fonctionne parfaitement alors