Récemment, lorsque je faisais des statistiques de projet, j'ai rencontré une exigence spécifique, exigeant que le tableau soit réparé lors du défilement de haut en bas; Lors du défilement à gauche et à droite, le tableau est fixé dans la première colonne de la table, la dernière colonne de la première colonne de la table est fixe.
Il peut être plus clair de mettre les rendus en premier:
Lors du défilement à gauche et à droite, les deux colonnes sont fixes et la partie médiane de la tête et la queue défile en conséquence.
Lors du défilement de haut en bas, la tête et la queue sont fixes et la partie médiane des première et dernière colonnes défile en conséquence.
Idées:Après avoir réfléchi pendant longtemps, j'ai trouvé qu'il était fondamentalement difficile à réaliser si j'utilise simplement une table, et il y a des endroits contradictoires lorsque je fais défiler de haut en bas. Enfin, j'ai changé d'avis pour utiliser la mise en page DIV et imiter la conception de la table pour réaliser cet effet.
résoudre: 1. Disposition globale: divisée en trois parties: supérieur, milieu et inférieur, à savoir l'en-tête, le corps et le pied de page. Le corps est solide. Implémentez le défilement de haut en bas. N'est-ce pas très simple? Haha. 2. Disposition de l'en-tête: divisé en conteneur gauche à droite, gauche 10% Flotts à gauche, conteneur à 80% de largeur de largeur à gauche, 10% de largeur à droite Flotts à gauche. Ajoutez un conteneur avec la largeur réelle de la colonne de données (positionnement relatif).3. Corps, pied de page et en-tête.
4. Control Core: Générez un (80%) DIV avec la même largeur que le conteneur et placez une div avec la même largeur de données réelle que le contenant de la colonne (comme ID = Scroll). Pour simuler les barres de défilement gauche et droite.
JavaScript Code Copier le contenu dans le presse-papiers