Astuces Excel
  1. Astuces Excel
  3. 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?
Intereting Posts
Lecture d'informations de hyperlink à partir d'un file Excel utilisant .NET Formule de reference nommée Excel – Mise à jour non automatique Exception COM lors de la sélection de cellules dans excel avec c # Excel – Vérifiez si deux valeurs existent set dans deux colonnes Comment exécuter une macro sur une autre application en utilisant vba Excel auto-filter VBA entre les pourcentages Remplacer les valeurs dans les colonnes Excel de hashtable à l'aide de Powershell Il existe une erreur 1004: erreur définie par l'application ou définie par l'object La coloration excelle les cellules en fonction des percentiles VBA Loop search par text, décalage puis augmentation Extraction d'une URL à partir d'un text hyperlié dans une cellule Excel Palette de colors de la feuille de calcul limite Excel VBA Accès / Excel VBA – Supprime les alertes et les messages d'affichage Des lignes de défilement qui correspondent à certaines cellules Comparer le contenu de 2 files excel

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?

Comment puis-je créer une table qui a sa première ligne et la première colonne toutes deux verrouillées, comme dans Excel, lorsque vous activez 'gel de volets'? J'ai besoin que le tableau se défile horizontalement et verticalement (beaucoup de solutions pour cela existent, mais ne permettent qu'un défilement vertical).

Donc, lorsque vous faites défiler vers le bas dans le tableau, la première rangée restra mise, car elle aura les en-têtes des colonnes. Cela peut finir par être dans un thead , ou ce n'est peut-être pas, ce qui rend la solution plus facile.

Lorsque vous faites défiler vers la droite, la première colonne rest mise, puisqu'elle contient les labels pour les lignes.

Je suis certain que cela est impossible avec CSS seul, mais quelqu'un peut-il me diriger vers une solution JavaScript? Il doit fonctionner dans tous les principaux browsers.

Oh, bien, j'ai cherché une table en défilement 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 Grande tablette html de taille dynamic 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 */ }); $ ('# myTable'). fxdHdrCol ({ $('#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 */ }); fixedCols: 3, / * 3 colonnes fixes * / $('#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 */ }); largeur: "100%", / * définir la largeur du conteneur (fixe ou en pourcentage) * / $('#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 */ }); hauteur: 500 / * régler la hauteur du récipient * / $('#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émo 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 datatables, la première contenant la première colonne. Vous devez synchroniser sa largeur et selon le contenu aussi 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 colonne.

Cela fonctionne très bien dans tous les principaux browsers, à l'exception d'un 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.

Il existe actuellement quelques solutions de browser croisées, parmi lesquelles SuperTable dont j'aime l'élégance et la simplicité (maintenant avec MooGrid) et SlickGrid avec son set printingnant 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 se défiler. Il peut prendre un object 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 associées à l'utilisation des attributes colspan ou rowspan.

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

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

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