冻结table行列

Html

Css

  
  
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
    
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
    
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
    
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
    
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
    
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
    
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
     
    
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr  
     
    
  
    
     
    
    111 222  
    111 222  
    111 222  
    111 222  
    111 222  
    111 222  
    111 222  
    111 222   
    
    
  
    
     
    
      
        111 222 333 444 555 666  
        777 888 999 000 aaa bbb  
        ccc ddd eee fff ggg nnn  
        bbb ccc www eee vvv rrr

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

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

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

冻结table行列



代码描述：固定table行和列

简单的冻结table行列，很粗糙。

2

最新

发表评论全部评论

暂时没有评论！

陈赛鹤0

2017/6/15 17:29:09

很麻烦的样子，自己用定位做了一个，滚动时改变固定目标的定位，相对简单一些回复

不知道起什么名字才吸引人0

2017/6/1 16:40:46

下载下来的跟demo效果不一样的
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

城古涯

相关代码

冻结table行列

最新

111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr

111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr

111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr
111	222	333	444	555	666	777	888	999	aaa	bbb	ccc	ddd	eee	fff	ggg	nnn	bbb	ccc	www	eee	vvv	rrr