HTML réalise un tableau fixe et peut faire défiler vers le haut, le bas, la gauche et la droite

Cet article présente principalement en détail la solution de fixation de la table autour de la table pour réaliser le défilement vers le haut, le bas, la gauche et la droite de la table. Lorsque la table défile de haut en bas, la tête et la queue de la table sont. corrigé ; lorsque le tableau défile vers la gauche et la droite, la première colonne et la dernière colonne du tableau sont corrigées. Cet article est Tout le monde a fourni des idées. Les amis intéressés peuvent se référer à

Question : .

Récemment, lors de la réalisation de statistiques de projet, j'ai rencontré une exigence spécifique, qui obligeait le tableau à défiler de haut en bas. Lorsque le tableau défile vers la gauche et la droite, les première et dernière colonnes du tableau sont fixes.

Cela sera peut-être plus clair si vous regardez d'abord les rendus :

Lors du défilement vers la gauche et la droite, les deux colonnes sont fixes, et la partie médiane de la tête et de la queue défile.

Lors du défilement de haut en bas, la tête et la queue sont fixes, et la partie médiane de la première colonne et de la dernière colonne défile en conséquence.

Idée :

Après y avoir longuement réfléchi, j'ai trouvé qu'il est fondamentalement difficile à mettre en œuvre simplement en utilisant des tableaux . Il y a des interactions lors du défilement de haut en bas. Finalement, j'ai changé d'avis et j'ai utilisé une disposition en p et une conception en forme de tableau pour obtenir cet effet.

Solution :

1. Disposition générale : est divisée en parties supérieure, médiane et inférieure, à savoir head Il y a trois parties : euh, body et footer. Le corps est solide et haut. Implémentez le défilement de haut en bas. N'est-ce pas très simple, haha.

2. Disposition de l'en-tête : est divisé en gauche conteneur droite, gauche10% largeur gauche flottant , conteneur 80 % de largeur flotte à gauche, droite 10 % de largeur flotte à gauche. Ajoutez un conteneur colonne-conteneur (positionnement relatif) avec la largeur réelle des données dans le conteneur.
3. Le corps et le pied de page sont identiques à l'en-tête.

4.
Contrôle Noyau : Générez un p avec la même largeur que le conteneur (80 %) et placez un p avec la même largeur que la largeur réelle des données de la colonne-conteneur (comme comme id=Scroll) . pour simuler les barres de défilement gauche et droite.

JavaScript CodeCopier le contenu dans le presse-papiers

1. $(

   "#Scroll").scroll(fonction () {

2. (

   this).scrollLeft (); ": -scrollLeft + "px" });

3. }); La barre de défilement contrôle le défilement du conteneur de colonnes dans le pied de page du corps de l’en-tête. De cette façon, les deux colonnes sont fixes lors du défilement vers la gauche et la droite, et les conteneurs de la première et de la dernière ligne défilent également. Conclusion : Le style de code étant trop long à publier, je ne parlerai ici que des idées, essayez-le.

[Recommandations associées]

4. 1
Tutoriel vidéo gratuit HTML

2
Explication détaillée des balises HTML couramment utilisées dans. développement front-end
3.
Code HTML pur pour obtenir un effet de défilement via la balise de sélection

4.

Exemple de code pour rédiger un CV personnel en HTML.

5.

Partagez trois méthodes pour créer de nouveaux éléments

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!