将表头固定在角度

Question

我想修复表格的标题，以便用户在滚动时可以看到列的标题。

table.html

<div class="container">
    <table class="table table-striped">
      <thead >
        <tr>
          <th>NAME</th>
          <th>ROLL</th>
          <th>CLASS</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let stu of students">
          <td>{{stu.name}}</td>
          <td>{{stu.roll}}</td>
          <td>{{stu.class}}</td>
        </tr>
      </tbody>
    </table>

  </div>

table.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table-tst',
  templateUrl: './table-tst.component.html',
  styleUrls: ['./table-tst.component.css']
})
export class TableTstComponent implements OnInit {

  constructor() { }
 students:any=[];
  ngOnInit() {
    for(let i=0;i<100;i++){
      this.students.push({
        name:"A"+i,
        roll:i,
        class:"X"
      })
    }
  }

}

我希望表头（即NAME，ROLL，CLASS）应保留在顶部，而用户可以滚动内容，

  

位置：固定

，但无法正常工作