Comment ajouter une barre de défilement à mon tableau HTML5 ?

Incorporation d'une barre de défilement dans un tableau HTML5

Pour activer une barre de défilement verticale dans un tableau HTML5, suivez les étapes ci-dessous.

1. Intégrer le code de contrôle de défilement

Dans le CSS du tableau, insérez le code suivant pour activer le défilement vertical :

table#my_table {
  border-radius: 20px;
  background-color: transparent;
  color: black;
  width: 500px;
  text-align: center;
  overflow-y: scroll;
}

2. Restreindre la barre de défilement au contenu du corps

Si votre tableau a un en-tête, utilisez le CSS suivant pour l'empêcher de défiler :

table#my_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

3. Resserrez la bordure inférieure

Pour améliorer l'expérience utilisateur, ajustez la bordure inférieure du tableau :

table#my_table td, table#my_table th {
  border-bottom: 1px solid black;
}

4. Ajustez la hauteur et la largeur de la table

Personnalisez la hauteur et la largeur de la table selon vos besoins :

table#my_table {
  height: 500px;
  width: 750px;
}

5. Optimiser l'épaisseur de la barre de défilement (facultatif)

Pour une barre de défilement plus fine, pensez à utiliser la propriété "-webkit-scrollbar-width" :

table#my_table::-webkit-scrollbar {
  width: 10px;
}

Conclusion :

Suivre ces étapes ajoutera une barre de défilement à votre tableau HTML5, permettant aux utilisateurs de naviguer de manière transparente dans son tableau. contenu.

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!