table 固定列和行的实现

于 2016-06-13 17:06:36 发布
阅读量9.9k 收藏 2
点赞数
分类专栏： 经验总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangwei249/article/details/51659120
版权
这篇博客探讨了如何在HTML表格中实现固定列和行的难点，特别是当表格具有动态宽度和高度时，如何确保复制部分的样式与原始表格一致。文章介绍了主要的实现方法和步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

处理思路：
    复制出一个和原始表一样的table(只保留需要固定的列或行), 覆盖到原始表上对应的行或列上，滚动时进行位置调整处理，使其始终保持固定位置不变

    难点： 复制出的行或列的高度和宽度要和原始表保持一致，当原始表指定固定宽高时比较简单，复制出的行列宽高保持一致即可，否则复制出的表样式要和原始表相同.

使用方法：
   1. 主调用方法入口：

  <body οnlοad="showFix(true,false,initTableId);">


   2. 复制原始表的行或列，这个自己复制吧，div名称统一命名，示例如下 
<pre name="code" class="html">  <!-- 复制的固定头两列 -->
  <div id="fixedColumnDiv" align="center" style="width:100px;position:Fixed;display:none;"> 
  <table id='columnTable' id='fixedColumn'>
    <tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr> 
  </table>
  </div>

  <!-- 复制的固定头一行 -->
  <div id="fixedRowDiv" align="center" style="height:auto;position:Fixed;display:none;"> 
  <table>
    <tr bgcolor="blue" id='fixedRow'>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
    </tr>
  </table>
 </div> 
 

 完整代码： 

 

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    body{
	   margin:0px;
	}
	table{
		width:auto;
		margin:0px;
		font:Georgia 11px;
		color:#333333;
		text-align:center;
		border-collapse:collapse; 
	}
	table td{
		border:1px solid #f00;
		width:100px;
		height:30px;
		padding:15px;
	} 
 </style>

 <script>
  
	var initLeft;
	var initTop; 
	var isFixColumn = false;
	var isFixRow = false;
	/**
	 * added by 王伟 20160612
	 * param:
	 *    isFixC: 是否固定列 true/false
	 *    isFixR: 是否固定行 true/false
	 *    initTableId： 原始表ID
	 */
	function showFix(isFixC,isFixR,initTableId){  
		//是否显示固定列或者固定行
	    isFixColumn = isFixC;
	    isFixRow = isFixR;
		if(checkScrollBar('h')){
	         document.getElementById("fixedColumnDiv").style.display="block";
	    }
		if(checkScrollBar('y')){
	         document.getElementById("fixedRowDiv").style.display="block";
	    }
		//获取原始表的具体位置
		var initTable = document.getElementById(initTableId);
	    initLeft = getPosition(initTable,'left');
	    initTop = getPosition(initTable,'top'); //如果div和table 之间有margin，则减去响应数值

        if(checkScrollBar('h')){
			var fixedColumnDiv = document.getElementById("fixedColumnDiv");
			fixedColumnDiv.style.position='absolute'; 
			fixedColumnDiv.style.left = initLeft;
			fixedColumnDiv.style.top = initTop; 
		} 
        if(checkScrollBar('y')){
			var fixedRowDiv = document.getElementById("fixedRowDiv");
			fixedRowDiv.style.position='absolute'; 
			fixedRowDiv.style.left = initLeft;
			fixedRowDiv.style.top = initTop; 
		}
	}

	
	/**
	 * 滚动时重新设置div层的位置 
	 */
	window.onscroll = function(){  
		  if(checkScrollBar('h')){  
			  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
		      var fixedColumnDiv = document.getElementById("fixedColumnDiv");
		      fixedColumnDiv.style.position='absolute';
		      fixedColumnDiv.style.left = (initLeft+scrollLeft)+'px';
		      fixedColumnDiv.style.top = initTop+'px';
		  }
		  if(checkScrollBar('y')){ 
			  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		      var fixedRowDiv = document.getElementById("fixedRowDiv");
		      fixedRowDiv.style.position='absolute';
		      fixedRowDiv.style.left = initLeft+'px';
		      fixedRowDiv.style.top = (initTop+scrollTop)+'px';
		  }
	} 
 
	/**
	 * 获取元素的位置偏移量信息
	 * param:
	 *    left:获取左偏移量
	 *    top: 获取上偏移量
	 */
    function getPosition(obj,type){ 
        var topValue= 0,leftValue= 0;
        while(obj){  
           leftValue+= obj.offsetLeft;
           topValue+= obj.offsetTop; 
           obj= obj.offsetParent;   
        }   
        finalvalue = leftValue + "," + topValue;
        if(type == 'left'){
            return   leftValue;
        }else if(type == 'top'){
            return topValue;
        }else {
            return 0;
        }
    } 

	/**
	 * 获取是否有滚动条
	 * param： h: 判断是否有横向滚动条，y：判断是否有竖向滚动条
	 * return：boolean， true：有，false：无
	 */
    function checkScrollBar(type){ 
		//判断是否有滚动条，有滚动条才显示固定列层
		var visuals = getPageSize('visual');
		var reals = getPageSize('real');
		if(type == 'h' && isFixColumn){
			if(document.body.style.overflow!="hidden"
				&& document.body.scroll!="no"
					&& reals[1] > visuals[1])
			{
				 return true;
			}else{ 
				 return false;
			} 
		}
		if(type == 'y' && isFixRow){
			if(document.body.style.overflow!="hidden"
				&& document.body.scroll!="no"
					&& reals[0] > visuals[0])
			{
				 return true;
			}else{ 
				 return false;
			} 
		}
	    return false;
	}

    /**
	 * 浏览器兼容的获取网页实际内容大小
	 * param: type 获取大小类型（visual或real）
	 * 参数值说明： visual： 获取网页课件区域高宽，real：网页内容真实宽高
	 */
	function getPageSize(type) {     
		//检测浏览器的渲染模式     
		var body = (document.compatMode&&document.compatMode.toLowerCase() == "css1compat")?document.documentElement:document.body;
		var bodyOffsetWidth = 0;
		var bodyOffsetHeight = 0;
		var bodyScrollWidth = 0;
		var bodyScrollHeight = 0;
		var pageDimensions = [0, 0];
		pageDimensions[0] = body.clientHeight;
		pageDimensions[1] = body.clientWidth;
		if(type == 'visual'){
		   return pageDimensions;
		}
		bodyOffsetWidth = body.offsetWidth;
		bodyOffsetHeight = body.offsetHeight;
		bodyScrollWidth = body.scrollWidth;
		bodyScrollHeight = body.scrollHeight;
		if (bodyOffsetHeight > pageDimensions[0]) {
			pageDimensions[0] = bodyOffsetHeight;
		}
		if (bodyOffsetWidth > pageDimensions[1]) {
			pageDimensions[1] = bodyOffsetWidth;
		}
		if (bodyScrollHeight > pageDimensions[0]) {
			pageDimensions[0] = bodyScrollHeight;
		}
		if (bodyScrollWidth > pageDimensions[1]) {
			pageDimensions[1] = bodyScrollWidth;
		}
		return pageDimensions;
	}
 
 </script>
 </head>
 <body οnlοad="showFix(true,false,'initTable');">
  <table id="initTable">
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr>
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr>
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr>
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr>
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr>
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr>
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr> 
  <tr>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
  </tr> 
  </table>

  <!-- 复制的固定头两列 -->
  <div id="fixedColumnDiv" align="center" style="width:100px;position:Fixed;display:none;"> 
  <table>
    <tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr> 
  </table>
  </div>

  <!-- 复制的固定头一行 -->
  <div id="fixedRowDiv" align="center" style="height:auto;position:Fixed;display:none;"> 
  <table>
    <tr bgcolor="blue">
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
    </tr>
  </table>
  </div>

 </body>
</html>

 

 

 

 


  
 

                

        

    

  



    


            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值