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
source

Peut-être utiliser à la max-heightplace de tout heightcomme ce dernier forcera la hauteur de la table à être500px

— Fred

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
source

Cela ne limite cependant pas la hauteur.

— Fred

Non, il le fait, il vous suffit display:blocksur la table de le faire se comporter comme un div jsfiddle.net/TSGSA/1

— Fred

@Fred: Les grands esprits se ressemblent. J'ai mis à jour ma réponse pendant que vous commentiez. :)

— AgentConundrum

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

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

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
source

Cela ne permettra pas de garder la tête en place pendant que le corps défile.

— David

Cette exigence ne figure pas dans la question initiale.

— Dark Falcon

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

Sûr. La taille du parent doit être spécifiée pour utiliser des tailles relatives. Par exemple: jsfiddle.net/hz8wy

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

— Krupesh Anadkat
source