Создать полосу прокрутки для HTML 5 таблицы с фиксированным заголовком

Question

Я хочу создать полосу прокрутки в HTML 5 для таблицы, чтобы заголовок был фиксированным.

Я уже создал полосу прокрутки для таблицы, но заголовок перемещается при прокрутке вниз. Я уже пытался использовать команду block: fixed в css, но она портит всю структуру таблицы.

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 5px grey; */
  border-radius: 10px;
}

Answer 1

.table-responsive{
  height:400px;  
  overflow:scroll;
}
 thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }