如何在表格中间滚动时固定页脚和页眉

有人可以告诉我如何根据屏幕尺寸固定代码的页眉和页脚,中间是可滚动的。我看到一些讨论这个问题的东西,但没有真正的解释。我对编码非常陌生,因此对我来说是一个试用错误。只是我有趣的项目使我前进。

<div class="container-fluid">
 <div class="table-responsive">
    <table class="table table-striped table-sm table-hover">
      <thead>
        <tr>
          <th nowrap="nowrap" class=" text-center">tes1#</th>
          <th nowrap="nowrap" class=" text-center">col2</th>
          <th nowrap="nowrap" class=" text-center">col3</th>
          <th nowrap="nowrap" class=" text-center">col4</th>
          <th nowrap="nowrap" class=" text-center">col6</th>
          <th nowrap="nowrap" class=" text-center">col7</th>
          <th nowrap="nowrap" class=" text-center">col8</th>
        </tr>
      </thead>
      <tbody>


               <!------Item 1-------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 2----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 2----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 3----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>

What i want to acheive