Geler la ligne du haut pour un tableau html uniquement (défilement fixe de l'en-tête du tableau)

Question

Je veux créer un tableau html avec la ligne du haut gelée (ainsi, lorsque vous faites défiler verticalement, vous pouvez toujours le voir).

Existe-t-il un moyen astucieux d'y parvenir sans javascript ?

Notez que je n'ai PAS besoin de geler la colonne de gauche.

Answer 1

Selon Pure CSS Scrollable Table with Fixed Header , j'ai écrit une DEMO pour corriger facilement l'en-tête en définissant overflow:auto sur le tbody.

 table thead tr{
    display:block;
}

table th,table td{
    width:100px;//fixed width
}


table  tbody{
  display:block;
  height:200px;
  overflow:auto;//set tbody to auto
}

Answer 2

Vous pouvez utiliser CSS position: sticky; pour la première ligne du tableau Réf MDN :

 .table-class tr:first-child>td{
    position: sticky;
    top: 0;
}