Bootstrap表格中，thead固定，tbody有垂直滾動條

1、html源碼：這里的table是使用的vue寫法，實際生成的表格和一個一個寫的tr  th td無異

<div class="panel-body no-padding">
    <table class="table table-condensed no-margin">
        <thead>
        <tr>
            <th></th>
            <th v-for="th in table.ths">{{th}}</th>
            <th class="last"></th>  //這個必須要，且占據寬度17px，即滾動條的寬度
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in Items">
            <td><input type="checkbox" :id="item.id" :value="item.id"
                       v-model="checkedNames">
            </td>
            <th scope="row">{{index+1+PageRows*(CurrentPage-1)}}</th>
            <td :class="{hide: key=='id' }" v-for="(itemValue,key,index) in item">
                <button v-if="key=='fd1'" :data-id="item.id" type="button"
                        class="btn btn-primary btn-v1 btn-block"
                        @click="pickedFn('a',layout.pickedFn.a,$event)"> {{itemValue}}
                </button>
                <button v-else-if="key=='remarks'" :data-id="item.id" type="button"
                        class="btn btn-primary btn-v1 btn-block"
                        @click="pickedFn('a',layout.pickedFn.b,$event)"> {{itemValue}}
                </button>
                <button v-else-if="key=='fd2'" :data-id="item.id" type="button"
                        class="btn btn-primary btn-v1 btn-block"
                        @click="pickedFn('b',2,$event)"> {{itemValue}}
                </button>
                <span v-else>{{itemValue}}</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>

2、css樣式

.table {
  background-color: $table-bg;
  margin-bottom: $table-margin-b;
  color: #fff;
  &.table1 {
    margin-bottom: 0px;
  }
  thead {
    width: calc(100% - 1em);  //我也不知道這句話啥意思，但是必須有它，沒有它效果依然出不來；當時是在網上找的例子
    th.last {
      width: 17px;//thead沒有滾動條要是不設置這個寬度的話，thead每一列就會與tbody每一列錯開，無法對齊
    }
  }
  thead, tbody tr {
    color: $tHead-color;
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  tbody {
    display: block;
    height: 200px;  //設置一定高度，當超過該高度時，自然出現滾動條
    overflow-y: scroll;  //這里只設置了y軸即垂直反向的滾動條
  }

  tbody > tr > td, tbody > tr > th {
    line-height: 2em;
  }
  thead th {
    border: none;
  }
}
.table > tbody > tr > td, .table > tbody > tr > th {
  border-top-color: $tBody-border-color;
}

    總結：當時嘗試了兩種方法，結果要么是thead與tbody一起滾動了，沒有對不齊的問題，但是明顯不合理，因為滾動條加在了table上即作用於thead和tbody上面，表頭當然沒辦法固定；
還有另外一種結果是：thead固定了，但是tbody的字段居然會隨着自身的長度撐開老遠，非常難看。更加對不齊。我當時整個人都是蒙圈了，想到了使用js來控制。又去斟酌了半天依舊沒有解決實際問題。
到這問題沒有解決但是我整個人已經處於蒙圈的狀態，索性不理他了，放了一個小長假回來，就使用了標紅的代碼，搞定！