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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值