Comment puis-je verrouiller la première ligne et la première colonne d'une table lors du défilement, éventuellement en utilisant JavaScript et CSS?

Oh bien, j'ai cherché une table mobile avec colonne fixe pour comprendre le besoin de cette exigence spécifique et votre question était l'une d'entre elles sans réponses proches.

J'ai répondu à cette question Large tablette html de taille dynamique avec une ligne de défilement fixe et une colonne de défilement fixe qui a inspiré pour montrer mon travail en tant que plugin https://github.com/meetselva/fixed -table -rows-cols

Le plugin convertit essentiellement une table HTML bien formatée en table déroulante avec en-tête et colonnes de table fixe.

L'utilisation est comme ci-dessous,

 $('#myTable').fxdHdrCol({ fixedCols : 3, /* 3 fixed columns */ width : "100%", /* set the width of the container (fixed or percentage)*/ height : 500 /* set the height of the container */ }); 

Vous pouvez vérifier la démonstration et la documentation ici

J'ai posté ma solution de plugin jQuery ici: En -tête de table congelé à l'intérieur de div

Il fait exactement ce que vous voulez et est vraiment léger et facile à utiliser.

Vous avez besoin de deux tables, où la première est une superposition exacte sur la seconde. La seconde contient toutes les données, la première contenant la première colonne. Vous devez synchroniser sa largeur et selon le contenu également la hauteur de ses lignes.

En plus de ces deux tables, vous avez besoin d'une troisième. C'est la première ligne, qui se situe exactement entre les deux autres et doit être synchronisée de la même manière.

Vous aurez besoin d'un positionnement absolu ici. Ensuite, vous synchroniserez le défilement de la table de données avec les positions de défilement de la ligne de tête et de la première table de colonne.

Cela fonctionne très bien dans tous les principaux navigateurs, à l'exception d'un seul problème: le défilement synchronisé va flotter. Pour réparer cela, vous avez besoin de deux conteneurs div différents qui contiennent un clone du contenu de la ligne d'en-tête et de la première colonne. Lorsque vous faites défiler verticalement, vous affichez le clone de la ligne d'en-tête pour éviter le flottement, alors que vous repositionnez l'original en arrière-plan. Lorsque vous faites défiler horizontalement, vous afficherez le clone de la première rangée. Même chose ici.

Je l'ai fait avec une combinaison de:

• Utilisation de tables multiples
• Cellules de taille fixe
• Les fonctions de scrollTop et scrollLeft de jQuery

Voici un jsfiddle exemple à démontrer.

N'a pas testé sur tous les navigateurs, mais j'imagine que ce n'est pas génial pour les anciennes versions de IE.

JQuery

 $("#clscroll-content").scroll(function() { $("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop()); $("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft()); }); $("#clscroll-column-headers").scroll(function() { $("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft()); }); $("#clscroll-row-headers").scroll(function() { $("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop()); }); 

HTML

 <div class="clscroll corner-header"> <table> <tr> <th>&nbsp;</th> </tr> </table> </div> <div class="clscroll column-headers" id="clscroll-column-headers"> <table> <tr> <th>Bus</th> <th>Plane</th> <th>Boat</th> <th>Bicycle</th> </tr> </table> </div> <div class="clscroll row-headers" id="clscroll-row-headers"> <table> <tr> <th>Red</th> </tr> <tr> <th>Green</th> </tr> <tr> <th>Blue</th> </tr> <tr> <th>Orange</th> </tr> <tr> <th>Purple</th> </tr> <tr> <th>Yellow</th> </tr> <tr> <th>Pink</th> </tr> <tr> <th>Brown</th> </tr> </table> </div> <div class="clscroll table-content" id="clscroll-content"> <table> <tr> <td>Red Bus</td> <td>Red Plane</td> <td>Red Boat</td> <td>Red Bicycle</td> </tr> <tr> <td>Green Bus</td> <td>Green Plane</td> <td>Green Boat</td> <td>Green Bicycle</td> </tr> <tr> <td>Blue Bus</td> <td>Blue Plane</td> <td>Blue Boat</td> <td>Blue Bicycle</td> </tr> <tr> <td>Orange Bus</td> <td>Orange Plane</td> <td>Orange Boat</td> <td>Orange Bicycle</td> </tr> <tr> <td>Purple Bus</td> <td>Purple Plane</td> <td>Purple Boat</td> <td>Purple Bicycle</td> </tr> <tr> <td>Yellow Bus</td> <td>Yellow Plane</td> <td>Yellow Boat</td> <td>Yellow Bicycle</td> </tr> <tr> <td>Pink Bus</td> <td>Pink Plane</td> <td>Pink Boat</td> <td>Pink Bicycle</td> </tr> <tr> <td>Brown Bus</td> <td>Brown Plane</td> <td>Brown Boat</td> <td>Brown Bicycle</td> </tr> </table> </div> 

CSS

 .clscroll table { table-layout: fixed; } .clscroll td, .clscroll th { overflow: hidden; } .corner-header { float: left; } .column-headers { float: left; overflow: scroll; } .row-headers { clear: both; float: left; overflow: scroll; } .table-content { table-layout: fixed; float: left; overflow: scroll; } .clscroll td, .clscroll th { width: 200px; border: 1px solid black; } .row-headers, .table-content { height: 100px; } .column-headers, .table-content, .table-content table, .column-headers table { width: 400px; } 

Il existe actuellement quelques solutions de navigateur croisé parmi lesquelles SuperTable dont j'aime l'élégance et la simplicité (maintenant avec MooGrid) et SlickGrid avec son ensemble impressionnant de fonctionnalités.

Voici un plugin JQuery: https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows

Il s'agit d'un plugin jQuery qui permet aux lignes de table et aux colonnes de ne pas défiler. Il peut prendre un objet de table HTML donné et le configurer afin qu'il puisse geler un nombre donné de colonnes ou de lignes ou les deux, de sorte que les colonnes ou les lignes fixes ne se défilent pas. Les lignes à congeler doivent être placées dans la section de la tête de table. Il peut également geler des lignes et des colonnes combinées à l'utilisation des attributs colspan ou rowspan.

Sort and Lock Table est la seule solution que j'ai vue qui fonctionne sur d'autres navigateurs que IE. (Bien que cette " colonne verrouillée css " puisse aussi faire l'affaire)

Vous devriez le tester, mais si vous avez intégré un iframe dans votre page, utilisez CSS pour positionner absolument la 1ère ligne et la colonne à 0,0 dans la page Iframe, cela résoudrait-il votre problème?

Que pensez-vous d'une solution où vous mettez les "données" réelles de la table dans son propre div, avec overflow: scroll; ? Ensuite, le navigateur créera automatiquement des barres de défilement pour la partie de la "table" que vous ne souhaitez pas verrouiller, et vous pouvez placer l'en-tête de table / premier rang juste au-dessus de <div> .

Je ne sais pas trop comment cela fonctionnerait avec le défilement horizontal.

J'ai couru à travers un site il y a quelques semaines. Ceci est un exemple de travail de la première colonne verrouillée, mais elle n'est pas compatible avec Firefox. Je n'ai pas beaucoup vérifié, mais il semble que cela ne fonctionne que dans IE. Il y a quelques notes que l'auteur fournit avec vous que vous pouvez lire.

Verrouillez la première colonne: http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

Faites-moi savoir si vous avez besoin du Javascript pour verrouiller les en-têtes de table aussi.

Vous pouvez le faire, sans javascript

Voir ce lien: http://yonax73.blogspot.com/2014/09/tabla-con-cabecera-estatica-cuerpo-con.html

Ou démo en direct: http://jsfiddle.net/yonatanalexis22/aeeme8mt/7/

 table{ border-spacing: 0; display: flex;/*Se ajuste dinamicamente al tamano del dispositivo**/ max-height: 40vh; /*El alto que necesitemos**/ overflow-y: auto; /**El scroll verticalmente cuando sea necesario*/ overflow-x: hidden;/*Sin scroll horizontal*/ table-layout: fixed;/**Forzamos a que las filas tenga el mismo ancho**/ width: 98vw; /*El ancho que necesitemos*/ border:1px solid gray;}