<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title></title>

    </head>

    <style type="text/css">

      #table-container{width:650px;height:250px;overflow: auto;margin: 50px;border: 1px solid #DDD;}

      #table-container table{width: 100%;border-width: 0;border-collapse: collapse;}

      #table-container table td{padding: 0;border-right: 1px solid #DDD;border-bottom: 1px solid #DDD;background: #FFF;}

      #table-container .table-top td, #table-container .table-lt td, #table-container .table-left td{background: green;}

      #table-container .table-top td:last-child{border-right: 0px solid #DDD;}

      #table-container .table-right td:last-child{border-right: 0px solid #DDD;}

      #table-container .table-right tr:last-child td{border-bottom: 0px solid #DDD;}

      #table-container .table-left tr:last-child td{border-bottom: 0px solid #DDD;}

      #table-container td div{display: inline-block;max-width: 200px;margin:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left;line-height: 24px;}

      #table-container .table-lt{position: fixed;z-index:3;}

      #table-container .table-top{position: fixed;overflow:hidden;z-index:2;}

      #table-container .table-left{position: fixed;overflow:hidden;z-index:2;}

      #table-container .table-right{position: relative;z-index:1;}

      #table-container .table-mask{position: relative;}

    </style>

    <body>

<div id="table-container">

        <table>

          <tbody>

            <tr><td>

                        <div>header-left-top</div>

                  </td>

                <td>

                      <div>topTitle1</div>

                </td>

                <td>

                      <div>topTitle2</div>

                </td>

                <td>

                      <div>topTitle3</div>

                </td>

                <td>

                      <div>topTitle4</div>

                </td>

                <td>

                      <div>topTitle5</div>

                </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle1</div>

                </td>

              <td>

                <div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouioud</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle2</div>

                </td>

              <td>

                <div>uoiuiuiouiou</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle3</div>

                </td>

              <td>

                <div>uoiuiuiouiou</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle4</div>

                </td>

              <td>

                <div>uoiuiuiouiou</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle5</div>

                </td>

              <td>

                <div>uoiuiuiouiou</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle6</div>

                </td>

              <td>

                <div>uoiuiuiouiou</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle7</div>

                </td>

              <td>

                <div>uoiuiuiouiou</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

            <tr>

                <td>

                  <div>leftTitle8</div>

                </td>

              <td>

                <div>uoiuiuiouiou</div>

              </td>

              <td>

                <div>uoifdfdfuiuiouiou</div>

              </td>

              <td>

                <div>uoiuiufdiouiou</div>

              </td>

              <td>

                <div>uoiuiufdsfsdfiouiou</div>

              </td>

              <td>

                <div>uoiuiusiouiou</div>

              </td>

            </tr>

          </tbody>

        </table>

</div>

        <script src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

    $.fn.scrollTab = function(){

        var container = this;

        container.find("table").after('<div class="table-lt" /><div class="table-top" /><div class="table-left" /><div class="table-right" />');

        var ltTable = container.find(".table-lt"),

            topTable = container.find(".table-top"),

            leftTable = container.find(".table-left"),

            rightTable = container.find(".table-right");

        var tab_lt = this.find("tbody tr:first-child td:first-child").remove(),

            tab_top = this.find("tbody tr:first-child").remove(),

            tab_left = this.find("tbody tr td:first-child").remove(),

            tab_right = this.find("table");

            this.find("table").remove();

        ltTable.html('<table><tbody></tbody></table>').find("tbody").append(tab_lt[0]);

        topTable.html('<div class="table-mask"><table><tbody></tbody></table></div>').find("tbody").append(tab_top);

        leftTable.html('<div class="table-mask"><table><tbody></tbody></table></div>');

        for(var td of tab_left){

            var tr = document.createElement("tr")

            tr.append(td)

            leftTable.find("tbody").append(tr)

        }

        rightTable.append(tab_right[0]);

        var containerWidth = 0,

            containerHeight =0,

            ltTableWidth = 0,

            ltTableHeight = 0,

            widthJson = {},

            timerLT = null;

            ltTableWidth = ltTable.width();

            ltTable.width(ltTableWidth);

            topTable.css("marginLeft",ltTableWidth);

            leftTable.width(ltTableWidth);

            rightTable.css("marginLeft",ltTableWidth);

            ltTableHeight = ltTable.height();

            leftTable.css("marginTop",ltTableHeight+"px");

            rightTable.css("marginTop",ltTableHeight+"px");

            containerHeight = container.height();

            containerWidth = container.width();

            topTable.width(containerWidth - ltTableWidth - (container.innerWidth() - container[0].clientWidth));

            leftTable.height(containerHeight - ltTableHeight - (container.innerHeight() - container[0].clientHeight));

            // figure out the width of each DIV in TD  --start

            function setDivWidth(obj){

              $(obj).find("div").each(function(index){

                if(!widthJson[index]){

                  widthJson[index] = 0;

                }

                if(widthJson[index]<$(this).width()) {

                  widthJson[index] = $(this).width();

                }

              });

            }

            topTable.find("tr").each(function(){

              setDivWidth(this);

            });

            rightTable.find("tr").each(function(){

              setDivWidth(this);

            });

            topTable.find("tr:first div").each(function(index){

              $(this).width(widthJson[index]);

            });

            rightTable.find("tr:first div").each(function(index){

              $(this).width(widthJson[index]);

            });

            // figure out the width of each DIV in TD  --end

            container.scroll(function(){

              var currentScrollTop = $(this).scrollTop(),

                  currentScrollLeft = $(this).scrollLeft();

              topTable.find(".table-mask").css("left", -currentScrollLeft+"px");

              leftTable.find(".table-mask").css("top", -currentScrollTop+"px");

            });

            $(document).scroll(function(){

              var currentScrollTop = $(this).scrollTop(),

                  currentScrollLeft = $(this).scrollLeft();

              ltTable.css("marginTop", -currentScrollTop+"px");

              ltTable.css("marginLeft", -currentScrollLeft+"px");

              topTable.css("marginTop", -currentScrollTop+"px");

              topTable.css("marginLeft", ltTableWidth - currentScrollLeft+"px");

              leftTable.css("marginTop", ltTableHeight - currentScrollTop+"px");

              leftTable.css("marginLeft", -currentScrollLeft+"px");

            });

            $(window).resize(function(){

              $(document).scroll();

            });

            timerLT = setInterval(function(){

              if(containerWidth != container.width() || containerHeight != container.height()){

                topTable.width(container.width() - ltTableWidth - (container.innerWidth() - container[0].clientWidth));

                leftTable.height(container.height() - ltTableHeight - (container.innerHeight() - container[0].clientHeight));

                containerWidth = container.width();

                containerHeight = container.height();

                container.scroll();// for IE

              };

            },0);

        }

        $("#table-container").scrollTab();

        </script>

    </body>

</html>

jq表头固定的更多相关文章

  1. html bootstrap 表头固定在顶部，表列 可以自由滚动的效果

    该效果主要是依照 bootstrap 的一个样式,class="navbar-fixed-top"; 参考网址为:http://v3.bootcss.com/components/ ...

  2. html css 如何将表头固定（转）

    html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...

  3. IE的表头固定/表头不动（使用expression）

    本文主要介绍在IE浏览器中,实现表头固定的一种方法.这种方法使用到了 IE 浏览器特有的 expression 方法. 表头固定DEMO1 主要代码: <style type="tex ...

  4. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  5. easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

  6. html css 如何将表头固定

    position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...

  7. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

  8. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  9. bootstrap-table固定表头固定列

    1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...

随机推荐

  1. ［Django 1］安装Django并创建虚拟虚拟环境项目

    1)安装Django 使用pip来安装,命令如下: pip3 install Djangopip install Django(安装到python2)python3 -m pip install Dj ...

  2. SQLite剖析之异步IO模式、共享缓存模式和解锁通知

    1.异步I/O模式    通常,当SQLite写一个数据库文件时,会等待,直到写操作完成,然后控制返回到调用程序.相比于CPU操作,写文件系统是非常耗时的,这是一个性能瓶颈.异步I/O后端是SQLit ...

  3. 解决 PHPExcel 长数字串显示为科学计数

    解决 PHPExcel 长数字串显示为科学计数 在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. ...

  4. django request对象和HttpResponse对象

    HttpRequest对象(除非特殊说明,所有属性都是只读,session属性是个例外)HttpRequest.scheme 请求方案(通常为http或https)HttpRequest.body 字 ...

  5. OpenLayers的定制

    最近因为工作的需要,把主流的的一些GIS的javascript库看了一遍,主要是ArcGIS Server API for Javascript,Openlayers和Leaflet. 先说说ArcG ...

  6. MapReduce实现手机上网流量分析（业务逻辑）

    一.问题背景 现在的移动刚一通话就可以在网站上看自己的通话记录,以前是本月只能看上一个月.不过流量仍然是只能看上一月的. 目的就是找到用户在一段时间内的上网流量. 本文并没有对时间分组.下一节进行分区 ...

  7. 单元测试与Moq

    这个篇幅里面,记录单元测试与Moq模拟包的知识点. 单元测试 每一个模块,都应该有对应的单元测试.单元测试可以保证你的代码准确性,大大减少出现BUG的几率.一个好的单元测试,也是重构代码必不可少的部分 ...

  8. BZOJ3631: [JLOI2014]松鼠的新家

    传送门 树上的差分优化,很简单的一道题,应该属于NOIP2015TGD2T3的子问题. //BZOJ 3631 //by Cydiater //2016.10.25 #include <iost ...

  9. 面试web前端开发，被打击了

    今天我去面试web前端开发,被打击了,也跟我也有一定的关系,最基础的东西我都没回答好,哎! 主要是我在等我有意向的公司给我发offer,闲着没事,刚好又有公司叫我去面试,我抱着多面一家也没有啥子坏处就 ...

  10. python：mysql+pycharm+Django环境搭建

    1.安装mysql-python 环境:OS X Yosemite10.10.2 + Python2.7 首先网上搜了下mysql-python,说要先安装mysql客户端,然后改配置文件,可是各种改 ...