Comment faire apparaître une barre de défilement de tableau HTML ?-tutoriel CSS-php.cn

How to Make an HTML Table Scrollbar Appear?

Comment afficher la barre de défilement sur un tableau HTML

Lorsqu'il s'agit de créer un tableau en HTML, il est courant de rencontrer des situations où vous souhaitez conserver un tableau cohérent taille tout en garantissant que son contenu reste accessible même lorsque le nombre de lignes dépasse la zone visible. Pour y parvenir, vous pouvez rencontrer des scénarios dans lesquels vous devez afficher une barre de défilement dans le tableau lui-même.

Dans ce cas, vous avez peut-être tenté d'utiliser des styles CSS tels que :

tbody {
  height: 80em;
  overflow: scroll;
}

Copier après la connexion

et incorporés dans votre structure HTML :

<table border=1>

Copier après la connexion

Cependant, vous avez peut-être remarqué que malgré la mise en œuvre de ces styles, une barre de défilement n'apparaît pas. Ce problème vient du fait que l'élément parent du , qui est la balise

élément, ne dispose pas des propriétés CSS nécessaires pour permettre le défilement.

Pour résoudre ce problème, vous devez modifier vos règles CSS pour les appliquer toutes les deux à l'élément

et elements :

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table * {
  background: yellow;
  color: black;
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

Copier après la connexion

De plus, vous devez envelopper le

élément dans un <div> élément avec l'ID "table-wrapper":

<div>

Copier après la connexion

En implémentant ces modifications, vous pouvez afficher avec succès une barre de défilement dans votre tableau HTML, permettant aux utilisateurs de parcourir son contenu de manière transparente.

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!

source：php.cn

Article précédent：Comment puis-je implémenter le défilement par débordement dans le corps d’un tableau tout en conservant la structure du tableau ? Article suivant：Comment puis-je précharger des images d’arrière-plan CSS pour un chargement plus rapide d’un site Web ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2561

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2702

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2289

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...