Maison > interface Web > tutoriel CSS > Comment créer un tableau défilant avec la première ligne et la première colonne verrouillées en JavaScript ?

Comment créer un tableau défilant avec la première ligne et la première colonne verrouillées en JavaScript ?

Susan Sarandon
Libérer: 2024-11-01 23:57:29
original
599 Les gens l'ont consulté

How to Create a Scrollable Table with Locked First Row and Column in JavaScript?

Verrouillage de la première ligne et de la première colonne dans un tableau défilant

Dans cette requête, l'utilisateur vise à créer un tableau avec la première ligne et la première colonne verrouillées, similaire à la fonctionnalité « geler les volets » dans Excel. Le tableau doit permettre un défilement horizontal et vertical.

Pour y parvenir, CSS seul peut ne pas suffire, ce qui conduit à l'exploration de solutions JavaScript. Une solution recommandée est un plugin JavaScript appelé "fixed-table-rows-cols".

Fixed-Table-Rows-Cols Plugin

Ce plugin transforme un tableau HTML formaté en un tableau déroulant avec un en-tête de tableau et des colonnes fixes. Il permet le verrouillage de la première ligne et des colonnes.

Utilisation :

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       // Number of fixed columns
    width        : "100%",  // Width of the container
    height       : 500      // Height of the container
});
Copier après la connexion

Avantages :

  • Permet un verrouillage flexible des colonnes et des en-têtes
  • Prend en charge différentes tailles de tableau
  • Fonctionne sur les principaux navigateurs Web

Pour plus d'informations et une démo en direct, visitez le GitHub du plugin référentiel : https://github.com/meetselva/fixed-table-rows-cols

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal