Comment ajouter une barre de défilement à un tableau HTML5 ?-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

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

Susan Sarandon

Dec 21, 2024 am 11:21 AM

How to Add a Scrollbar to an HTML5 Table?

Création d'une barre de défilement dans un tableau HTML5

Pour améliorer l'expérience utilisateur lors de l'affichage de tableaux longs, l'ajout d'une barre de défilement offre un moyen pratique de naviguer le contenu. Voici un guide étape par étape sur la façon d'incorporer une barre de défilement dans un tableau HTML5 :

Structure HTML :

Encapsulez les données de votre tableau dans un élément de tableau avec un ID pour un référencement et un style faciles. Vous pouvez également définir des lignes de tableau (

) et des cellules de données () selon vos besoins.

Style CSS :

table.tableSection {

a. Définissez la propriété d'affichage sur "table" pour organiser les données du tableau sous forme de tableau.
b. Spécifiez la largeur sous forme de pourcentage ou de valeur fixe pour contrôler la largeur globale du tableau.
table.tableSection thead, table.tableSection tbody {

un. Définissez la propriété float sur "left" pour permettre aux sections d'en-tête (thead) et de corps (tbody) d'apparaître côte à côte.
b. Définissez la largeur en pourcentage de la largeur du tableau pour vous assurer qu'ils occupent toute la largeur.
table.tableSection tbody {

a. Définissez la propriété overflow sur "auto" pour activer le défilement vertical lorsque le contenu dépasse la hauteur disponible.
b. Définissez la hauteur pour spécifier la zone visible du corps de la table.
table.tableSection tr {

a. Définissez la largeur en pourcentage de la largeur du tableau pour contrôler la largeur de chaque ligne.
b. Définissez la propriété d'affichage sur "table" pour organiser les cellules dans chaque ligne.
table.tableSection th, table.tableSection td {

un. Définissez la largeur en pourcentage de la largeur du tableau pour déterminer la largeur de chaque cellule.

Considérations supplémentaires :

Si votre tableau contient une ligne d'en-tête, vous devrez peut-être gérer l'espacement entre les cellules d'en-tête et les cellules du corps à l'aide de CSS ou de JavaScript.
Pour empêcher la ligne d'en-tête du défilement hors de vue, pensez à utiliser des propriétés CSS3 telles que calc ou position:sticky pour conserver sa visibilité.
Vous pouvez également détecter la présence d'une barre de défilement à l'aide de JavaScript et appliquer un style en conséquence.

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!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Actualités hebdomadaires de la plate-forme: Amélioration de l'UX sur les connexions lents, un conseil pour écrire du texte alt et un polyfill pour l'attribut de chargement HTMLApr 17, 2025 am 11:09 AM

Dans cette semaine, comment déterminer une connexion lente, ce que nous devons mettre dans le texte alt pour les images et un nouveau polyfill pour l'attribut de chargement HTML,

Popovers réutilisables pour ajouter un peu de popApr 17, 2025 am 11:02 AM

Un popover est une vue transitoire qui apparaît sur un contenu à l'écran lorsqu'un utilisateur clique sur un bouton de commande ou dans une zone définie. Par exemple,

Styling Liens avec de véritables soulignementsApr 17, 2025 am 10:57 AM

Avant de venir à la façon de coiffer, nous devrions répondre à la question: devrions-nous souligner?

Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow DomApr 17, 2025 am 10:55 AM

Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves

Orteil Tic Tic multijoueur avec GraphQLApr 17, 2025 am 10:54 AM

GraphQL est un langage de requête pour les API qui est très stimulant pour les développeurs frontaux. Comme le site GraphQL l'explique, vous décrivez vos données, demandez ce

Opérations logiques avec des variables CSSApr 17, 2025 am 10:44 AM

Très souvent, tout en utilisant des variables de commutation (une variable qui soit 0 ou 1, un concept qui a expliqué en détail dans cet article), je souhaite que je puisse pouvoir

Videos YouTube à chargement paresseuxApr 17, 2025 am 10:40 AM

C'est une idée très intelligente via Arthur Corenzan. Plutôt que d'utiliser l'intégration YouTube par défaut, qui ajoute un Crapload de ressources à une page si l'utilisateur joue

Pouvez-vous faire pivoter le curseur dans CSS?Apr 17, 2025 am 10:28 AM

En quelque sorte! Il n'y a pas de moyen simple ou standard de le faire, mais cela est possible. Vous pouvez changer le curseur en différentes versions natives intégrées avec CSS avec le

See all articles