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的字段居然会随着自身的长度撑开老远，非常难看。更加对不齐。 没有人能一路单纯到底，但是要记住，别忘了最初的自己!
PS：感谢原作，亲测有效~~~（重点请参考注释处或查看原作）
