web-dev-qa-db-fra.com

Comment spécifier la hauteur de la table de sorte qu'une barre de défilement verticale apparaisse?

J'ai une table avec beaucoup de lignes sur ma page. J'aimerais définir la hauteur de la table, par exemple pour 500 pixels, de telle sorte que si la hauteur de la table est supérieure à celle-ci, une barre de défilement verticale apparaîtra. J'ai essayé d'utiliser l'attribut CSS height sur le table, mais cela ne fonctionne pas.

csscss-tables
96
Misha Moroshko

Essayez d’utiliser la propriété overflow CSS. Il existe également des propriétés distinctes pour définir le comportement du débordement horizontal uniquement (overflow-x) Et du débordement vertical (overflow-y).

Puisque vous ne voulez que le défilement vertical, essayez ceci:

table {
  height: 500px;
  overflow-y: scroll;
}

EDIT:

Apparemment, les éléments <table> Ne respectent pas la propriété overflow. Cela semble être dû au fait que les éléments <table> Ne sont pas restitués sous la forme display: block Par défaut (ils ont en fait leur propre type d'affichage). Vous pouvez forcer la propriété overflow à fonctionner en définissant l'élément <table> Sur un type de bloc:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Notez que la largeur de l'élément sera de 100%. Par conséquent, si vous ne souhaitez pas qu'il occupe toute la largeur horizontale de la page, vous devez également spécifier une largeur explicite pour l'élément.

157
AgentConundrum

Vous devez envelopper la table dans un autre élément et définir la hauteur de cet élément. Exemple avec css en ligne:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>
56
Dark Falcon

pour définir la hauteur de la table, vous devez d’abord définir la propriété css "display: block", puis vous pouvez ajouter les propriétés "width/height". Je trouve que cet article de Mozilla est une très bonne ressource pour apprendre à styliser des tables: Link

2
krupesh Anadkat