使用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);