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来控制。又去斟酌了半天依旧没有解决实际问题。
到这问题没有解决但是我整个人已经处于蒙圈的状态,索性不理他了,放了一个小长假回来,就使用了标红的代码,搞定!
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/9203724.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」