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來控制。又去斟酌了半天依舊沒有解決實際問題。
到這問題沒有解決但是我整個人已經處於蒙圈的狀態,索性不理他了,放了一個小長假回來,就使用了
標紅的代碼,搞定!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM