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

Question

J'ai un tableau avec de nombreuses lignes sur ma page. J'aimerais définir la hauteur du tableau, disons 500px, de sorte que si la hauteur du tableau 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 pour définir le comportement du débordement horizontal (overflow-x) et vertical (overflow-y).

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

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

---

ÉDITER :

Apparemment les éléments ``overflow`

ne respectent pas la propriété . Cela semble être parce que les éléments ne sont pas rendus comme display: block``overflow

par défaut (ils ont en fait leur propre type d'affichage). Vous pouvez forcer la propriété à fonctionner en définissant l'élément comme un type de block :

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

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

Answer 2

Vous devez envelopper la table à l'intérieur d'un autre élément et définir la hauteur de cet élément. Exemple avec du css en ligne :

Answer 3

Aucune de ces solutions n'a fonctionné. Cependant, j'ai utilisé la solution flex de Bootstrap et ça a fonctionné

table, td {
  border: 1px solid black;
}
th {
  border-left: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 400px;

}

thead {
    padding-right: 13px;
    flex: 0 0 auto;
}

tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}

    Prénom
    Nom
    Économies

    Pierre
    Griffin
    100 $

    Lois
    Griffin
    150 $

    Joe
    Swanson
    300 $

    Cleveland
    Brown
    250 $

    Peter
    Griffin
    100 $

    Lois
    Griffin
    150 $

    Joe
    Swanson
    300 $

    Cleveland
    Brown
    250 $

    Peter
    Griffin
    100 $

    Lois
    Griffin
    150 $

    Joe
    Swanson
    300 $

    Cleveland
    Brown
    250 $

    Peter
    Griffin
    100 $

    Lois
    Griffin
    150 $

    Joe
    Swanson
    300 $

    Cleveland
    Brown
    250 $

    Peter
    Griffin
    100 $

    Lois
    Griffin
    150 $

    Joe
    Swanson
    300 $

    Cleveland
    Brown
    250 $

    Peter
    Griffin
    100 $

    Lois
    Griffin
    150 $

    Joe
    Swanson
    300 $

    Cleveland
    Brown
    250 $

    Peter
    Griffin
    100 $

    Lois
    Griffin
    150 $

    Joe
    Swanson
    300 $

    Cleveland
    Brown
    250 $

Answer 4

CSS propose également un tableau HTML avec une hauteur fixe. Il définit la hauteur du tbody HTML à 400 pixels et le tbody HTML défiler lorsque celui-ci est plus grand, en conservant le thead HTML comme un élément fixe.

De plus, chaque cellule th de l'en-tête et chaque cellule td du corps doivent être stylisées pour la largeur fixe désirée.

#the-table {
  display: block;
  background: white; /* facultatif */
}

#the-table thead {
  text-align: left; /* facultatif */
}

#the-table tbody {
  display: block;
  max-height: 400px;
  overflow-y: scroll;
}

Answer 5

Pour définir la hauteur du tableau, vous devez d'abord définir la propriété css "display: block" puis vous pouvez ajouter les propriétés "largeur/hauteur". Je trouve cet article de Mozilla très utile pour apprendre comment styliser les tableaux : Lien