html表格第一列和最后一列冻结

使用DIV布局与JS动态调整宽度

最新推荐文章于 2025-10-12 17:22:09 发布

原创最新推荐文章于 2025-10-12 17:22:09 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种利用DIV元素和JavaScript动态调整宽度的方法，实现三栏布局的自适应效果，同时讨论了滚动条的美观问题。通过具体代码示例，展示了如何设置各部分的宽度，并保持页面整体布局的协调。

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