Une ligne statique dans un tableau HTML

Question

J'essaye de créer un fichier listant un Windows Explorer en HTML/Javascript. En tant que tel, je voudrais que la première rangée de la table, qui contient les en-têtes pour toutes les colonnes, soit visible même lorsque les colonnes défilent.

J'ai essayé quelques options consistant à placer les en-têtes dans une table séparée, mais tous ont échoué pour la première raison - lorsque la liste de fichiers défile horizontalement, la table de titres ne défile pas avec elle.

Par conséquent, je cherche essentiellement un élément lié à un autre de telle manière qu'il défile horizontalement avec l'autre, mais pas verticalement. Je me rends compte que beaucoup penseront que je devrais utiliser css et non des tables, mais c'est discutable car même en utilisant css je ne peux pas résoudre le problème de vouloir la barre d'en-tête pour faire défiler horizontalement les fichiers, mais pas verticalement.

Toute aide que vous pouvez offrir serait grandement appréciée.

Answer 1

Ma suggestion est d'utiliser Javascript. Accrocher à l'événement onScroll des deux éléments défilants et, sur l'événement, mettre à jour la propriété scrollLeft des deux éléments.

var tableHeader = document.getElementById('tableHeader'); 
    var tableBody = document.getElementById('tableBody'); 

    function updateTableBody(e){ 
     tableBody = tableHeader.scrollLeft; 
    } 

    function updateTableHeader(e){ 
     tableHeader = tableBody.scrollLeft; 
    }  

    tableHeader.addEventListener('scroll', updateTableBody, false); 
    tableBody.addEventListener('scroll', updateTableHeader, false); 

Bien sûr, ce n'est pas l'épreuve des balles et pourrait être optimisé, mais il vous donnera et idée et nous espérons un bon départ. REMARQUE: Assurez-vous que les deux éléments ont les mêmes dimensions, sinon le défilement aura un décalage bizarre.

Answer 2

Malheureusement, ce n'est pas disponible en tant que solution CSS uniquement. CSS possède certaines fonctionnalités qui, théoriquement, peuvent être utilisées pour faire défiler un TBODY, mais le support du navigateur est beaucoup trop incohérent.

Une solution non encore mentionnée est la bibliothèque Ext JS. Il fait BEAUCOUP plus que juste des tableaux déroulants, et vous devrez revoir la licence pour voir si cela fonctionnera pour vous, mais leur objet grille est le remplacement de table le plus robuste que j'ai vu.