html表格第一列和最后一列冻结
html表格第一列和最后一列冻结
使用div思路,div溢出滚动,
js动态获取宽度,
缺陷,滚动条不是很美观
-
.zuo{
-
width: 15%;
-
height: 100%;
-
/* border: 1px solid green; */
-
float:left;
-
background: #f0f0f0;
-
}
-
.zhong{
-
width: 69%;
-
height: 100%;
-
/* border: 1px solid yellow; */
-
float: left;
-
overflow: scroll;
-
overflow-y: hidden;
-
}
-
.you{
-
width:15%;
-
height:100%;
-
/* border:1px solid green; */
-
float:right;
-
background: #f0f0f0;
-
}
-
.gun{
-
width:1600px;
-
height:100%;
-
}
html
-
<div class="zuo" id="zuo">
-
<table class="table table-hover" >
-
<thead>
-
<tr>
-
<th style="text-align:center;">订单ID</th>
-
</tr>
-
</thead>
-
<tbody align="center >
-
<tr>
-
<td>111111</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
<div class="zhong" id="zhong">
-
<div class="gun" id="gun">
-
<table class="table table-hover">
-
<thead>
-
<tr>
-
<th>站名</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>666</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
</div>
-
<div class="you" id="you">
-
<table class="table table-hover">
-
<thead>
-
<tr>
-
<th style="text-align:center;">操作</th>
-
</tr>
-
</thead>
-
<tbody align="center">
-
<tr>
-
<td>
-
123
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
function tabledj() {
-
var box = document.getElementById("PartialMenuListPage");//30
-
// var tableHeight = window.getComputedStyle(box).height;
-
var tableWidth = window.getComputedStyle(box).width;
-
document.getElementById("zuo").style.width= 145 +"px"; //145 左边
-
tableWidth=tableWidth.replace("px", "");
-
document.getElementById("zhong").style.width=(tableWidth-145-155-30*2) +"px";//中间
-
document.getElementById("gun").style.width= tableWidth*1.5 +"px"; //中间的中间
-
document.getElementById("you").style.width= 155 +"px"; //155 右边
-
}
-
setInterval(function() {
-
tabledj();
-
}, 0);