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

101

J'ai un tableau avec de nombreuses lignes sur ma page. Je voudrais définir la hauteur de la table, par exemple 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' heightattribut CSS sur le table, mais cela ne fonctionne pas.

css css-tables Misha Moroshko
la source
1
Peut-être utiliser à la max-heightplace de tout heightcomme ce dernier forcera la hauteur de la table à être500px
Fred
1
Vous voudrez peut-être poser une deuxième question, sur la façon d'empêcher la ligne d'en-tête de défiler. ;)
Bill Bingham
Voir aussi stackoverflow.com/questions/1587927/…
Alex Nolasco

Réponses:

173

Essayez d'utiliser la overflowpropriété CSS. Il existe également des propriétés distinctes pour définir le comportement du débordement horizontal ( 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;
}

ÉDITER:

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

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

Notez que cela fera que l'élément aura une largeur de 100%, donc si vous ne voulez pas qu'il occupe toute la largeur horizontale de la page, vous devez également spécifier une largeur explicite pour l'élément.

AgentConundrum
la source
3
Cela ne limite cependant pas la hauteur.
Fred
6
Non, il le fait, il vous suffit display:blocksur la table de le faire se comporter comme un div jsfiddle.net/TSGSA/1
Fred
2
@Fred: Les grands esprits se ressemblent. J'ai mis à jour ma réponse pendant que vous commentiez. :)
AgentConundrum
1
Cette réponse m'a vraiment aidé, mais au lieu de l'appliquer à la balise table, cela devrait être fait au tbody, afin de permettre à l'en-tête de rester statique lors du défilement. Ensuite, il y a un style à trier en ce qui concerne la zone dans la tête qui se trouve au-dessus de la barre de défilement.
David
7
Si vous comptez l'utiliser sur le tbody, assurez-vous d'ajouter display: block au thead (et probablement au tfoot) ou ils pourraient devenir un peu fous. Le problème, semble-t-il, est qu'une fois que vous faites cela, vous avez rompu le lien entre la tête et le corps: les colonnes du premier ne sont pas conscientes de la largeur du second. Donc, vous corrigez cela et vous descendez la pente glissante. "Je suis mort pour la beauté ..."
Cuse70
59

Vous devez envelopper le tableau 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>
Faucon noir
la source
9
Cela ne permettra pas de garder la tête en place pendant que le corps défile.
David
21
Cette exigence ne figure pas dans la question initiale.
Dark Falcon
2
De plus, l'autre réponse (acceptée) ne maintient pas non plus le thead en place.
Brock Adams
Vous pouvez toujours faire apparaître un en-tête en place avec cette méthode. Vous masquez l'en-tête du tableau, puis créez un deuxième tableau au-dessus du premier tableau qui contient l'en-tête. Ensuite, stylisez les deux tableaux pour avoir display:table;leurs lignes à avoir display:table-row;et leurs cellules à avoir display:table-cell;et les deux tableaux correspondent et semblent ne faire qu'un. (REMARQUE: cela ne fonctionne pas avec de très grandes tables; en gros, il les fait correspondre quand c'est possible. J'ai utilisé cette technique plusieurs fois.)
levininja
1
Sûr. La taille du parent doit être spécifiée pour utiliser des tailles relatives. Par exemple: jsfiddle.net/hz8wy
Dark Falcon
1

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 cet article de Mozilla une très bonne ressource pour apprendre à styliser les tableaux: Lien

Krupesh Anadkat
la source