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来控制。又去斟酌了半天依旧没有解决实际问题。
到这问题没有解决但是我整个人已经处于蒙圈的状态，索性不理他了，放了一个小长假回来，就使用了标红的代码，搞定！