在使用bootstrap表格时,之前想着说直接把外层的div添加滚动,这样也算是实现了效果,但是伤心的是我的表格里面有固定列,如果直接用表格外层的overflow-x: scroll的话滚动时固定列的效果就消失了,所以没有办法,必须得把她本身的表格滚动条固定到屏幕的底部(想放置的位置),
之前的效果,必须拉倒表格最底部才能看到滚动条
实现以后的效果,冻结表格依然有效
作为一个小白,经历了好几个思想斗争,终于有了一点思路,就是自己写一个div,然后把表格的宽赋值给它,并且用这个div的滚动条联动table自带的滚动条,通过样式查看,发现table最底部的滚动条在.fixed-table-body这个样式上,所以对他联动,代码如下
body里面
<body>
<!-- 表格 -->
<div id="tbaleDiv" class="pre-scrollable"></div>
<!-- 滚动条 -->
<div id="scrollDiv">
<div id="scrollDivTable"></div>
</div>
</body>
style里面
/*位置自己定,想在哪里都行*/
#scrollDiv{
position: fixed;
left: 22px;
bottom: 43px;
/*width: 200px;*/
height: 10px;
overflow-y: scroll;
overflow-x: scroll;
z-index: 3;
}
#scrollDivTable{
height: 10px;
}
/*原本的滚动条不显示*/
.fixed-table-body::-webkit-scrollbar {
display: none;
}
js里面
//生成表格
$("#tbaleDiv").html("<table id='tableDetailsDiv' class='table text-nowrap'></table>");
.
.
.(表格的生成内容不详述)
.
//把原来外层的宽度赋值给新滚动条的外层
$("#scrollDiv").css('width',$('.fixed-table-body').width());
//把表格的宽度赋值给新滚动条的内层以撑出原本的滚动条的样子
$("#scrollDivTable").css('width',$('#tableDetailsDiv').width());
// 滚动条联动
$("#scrollDiv").scroll(function(){
$(".fixed-table-body").scrollLeft($(this).scrollLeft()); // 横向滚动条
});