Comment résoudre le problème que la partie du corps disparaît après avoir dépassé l'en-tête dans l'effet de défilement automatique du tableau?

Scrolling de table automatique: résolvez le problème du contenu débordant de l'en-tête

Lors de la création d'effets de défilement automatique des tables, vous rencontrez souvent un problème difficile: le contenu principal de la table est défilé au-delà de l'en-tête et disparaît, affectant l'effet visuel et l'expérience utilisateur. Cet article analysera la cause profonde du problème et fournira une solution CSS.

Problème: le contenu déborde de l'en-tête

Lors de l'utilisation de l'animation pour faire défiler automatiquement la table, le TBODY peut faire défiler la tête avant de disparaître, comme indiqué dans la figure ci-dessous:

(Illustration: les lignes de table sont toujours visibles après avoir dépassé l'en-tête lors du défilement)

Voici un exemple de code:

numéro de série	Niveau d'acier	Spécification	zone	Numéro de position de la bibliothèque
1	1000	vingt-deux	UN	121

/ * Table Scroll Animation * /
Table @keyframes {
  0% {transform: tradlatey (0); }
  100% {transform: tradlatey (-100%); }
}

.Table tbody {
  Animation: Tableau 10S Infini linéaire;
}

Analyser la cause profonde du problème

Le problème est que l'animation de l'élément tbody fait dépasser son contenu de la zone visible du conteneur de table. overflow: hidden de tbody est invalide car elle n'agit que sur tbody , pas sur toute la table.

Solution: réglage du style CSS

Pour empêcher tbody de déborder l'en-tête de la table, nous devons ajuster les styles CSS .table et .table thead

 / * Table Scroll Animation * /
Table @keyframes {
  0% {transform: tradlatey (0); }
  100% {transform: tradlatey (-100%); }
}

.tableau {
  débordement: caché; / * Masquer le contenu au-delà du conteneur de table * /
}

.Table thead {
  Position: relative; / * Utiliser le positionnement relatif * /
  Z-Index: 1; / * Améliorer le niveau et couvrir TBODY * /
  Color d'arrière-plan: #FFF; / * Assurez-vous que la couleur de fond d'en-tête de table couvre le contenu de défilement * /
}

.Table tbody {
  Animation: Tableau 10S Infini linéaire;
}

En appliquant overflow: hidden à .table nous nous assurons que tout le contenu au-delà du conteneur de table est masqué. Pendant ce z-index , définissez .table thead tbody L'ajout background-color garantit que la couleur d'arrière-plan de l'en-tête de table couvre le contenu de défilement pour éviter les lacunes. Cela résout le problème que le contenu de la table déborde de l'en-tête et réalise un effet de défilement automatique propre et rangé.

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!