Comment ajouter des barres de défilement aux tableaux HTML5 ?

Intégrer des barres de défilement dans les tableaux HTML5 : un guide complet

En HTML5, l'amélioration des fonctionnalités des tableaux est devenue essentielle pour gérer de grands ensembles de données. L'une de ces améliorations consiste à ajouter une barre de défilement pour permettre aux utilisateurs de naviguer sans effort dans un contenu étendu.

Étape 1 : Définir la structure du tableau

Commencez par définir la structure de votre tableau en HTML5. comme suit :

Le tableau se compose de deux sections : l'en-tête (

) contenant les en-têtes du tableau et le corps (

) contenant les lignes de données.

Étape 2 : styliser le tableau

Ensuite, ajoutez un style CSS pour améliorer l'apparence du tableau et fournir un barre de défilement personnalisable :

#my_table {
  /* General table styling */
  border-radius: 20px;
  background-color: transparent;
  color: black;
  width: 500px;
  text-align: center;
}

#my_table thead, #my_table tbody {
  /* Separate styling for the table sections */
  display: table;
  width: 100%;
}

#my_table tbody {
  /* Styling for the body, including scrollbar */
  overflow: auto;
  height: 150px;
}

#my_table tr {
  /* Styling for individual rows */
  width: 100%;
  display: table;
  text-align: left;
}

#my_table th, #my_table td {
  /* Styling for table cells */
  width: 33%;
}

Ce CSS garantit que le tableau s'adapte à une largeur prédéfinie, a une bordure arrondie et a un barre de défilement dans la section corps.

Étape 3 : Considérations supplémentaires (facultatif)

Pour un contrôle amélioré, vous pouvez empêcher le défilement des en-têtes de tableau en ajoutant un droit de remplissage à le section, tenant compte de la largeur de la barre de défilement.

#my_table thead {
  padding-right: 18px;
  width: calc(100% - 18px);
}

Conclusion

En suivant ces étapes, vous pouvez facilement intégrer une barre de défilement dans vos tableaux HTML5, garantissant ainsi une expérience utilisateur lors de la navigation dans des ensembles de données étendus.

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!