Comment spécifier la hauteur de la table de manière à ce qu'une barre de défilement verticale apparaisse?

Question

J'ai une table avec beaucoup de lignes sur ma page. Je voudrais définir la hauteur de la table, disons pour 500px, de sorte que si la hauteur de la table est plus grande que cela, 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.

Answer 1

Essayez d'utiliser la propriété CSS overflow. Il existe également des propriétés distinctes permettant de définir le comportement du débordement horizontal (overflow-x) et du débordement vertical (overflow-y).

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

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

---

EDIT:

Apparemment <table> éléments ne respectent pas la propriété overflow. Cela semble être dû au fait que les éléments <table> ne sont pas rendus comme display: block par défaut (ils ont en fait leur propre type d'affichage). Vous pouvez forcer la overflow propriété de travailler en définissant l'élément <table> être un type de bloc:

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

Notez que cela entraînera l'élément d'avoir une largeur de 100%, donc si vous ne voulez pas qu'il prenne toute la largeur horizontale de la page, vous devez également spécifier une largeur explicite pour l'élément.

Answer 2

Vous devez placer 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>