1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title></title>
  7.     </head>
  8.     <style type="text/css">
  9.       #table-container{width:650px;height:250px;overflow: auto;margin: 50px;border: 1px solid #DDD;}
  10.       #table-container table{width: 100%;border-width: 0;border-collapse: collapse;}
  11.       #table-container table td{padding: 0;border-right: 1px solid #DDD;border-bottom: 1px solid #DDD;background: #FFF;}
  12.       #table-container .table-top td, #table-container .table-lt td, #table-container .table-left td{background: green;}
  13.       #table-container .table-top td:last-child{border-right: 0px solid #DDD;}
  14.       #table-container .table-right td:last-child{border-right: 0px solid #DDD;}
  15.       #table-container .table-right tr:last-child td{border-bottom: 0px solid #DDD;}
  16.       #table-container .table-left tr:last-child td{border-bottom: 0px solid #DDD;}
  17.       #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;}
  18.       #table-container .table-lt{position: fixed;z-index:3;}
  19.       #table-container .table-top{position: fixed;overflow:hidden;z-index:2;}
  20.       #table-container .table-left{position: fixed;overflow:hidden;z-index:2;}
  21.       #table-container .table-right{position: relative;z-index:1;}
  22.       #table-container .table-mask{position: relative;}
  23.  
  24.     </style>
  25.     <body>
  26. <div id="table-container">
  27.         <table>
  28.           <tbody>
  29.             <tr><td>
  30.                         <div>header-left-top</div>
  31.                   </td>
  32.                 <td>
  33.                       <div>topTitle1</div>
  34.                 </td>
  35.                 <td>
  36.                       <div>topTitle2</div>
  37.                 </td>
  38.                 <td>
  39.                       <div>topTitle3</div>
  40.                 </td>
  41.                 <td>
  42.                       <div>topTitle4</div>
  43.                 </td>
  44.                 <td>
  45.                       <div>topTitle5</div>
  46.                 </td>
  47.             </tr>
  48.             <tr>
  49.                 <td>
  50.                   <div>leftTitle1</div>
  51.                 </td>
  52.               <td>
  53.                 <div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouioud</div>
  54.               </td>
  55.               <td>
  56.                 <div>uoifdfdfuiuiouiou</div>
  57.               </td>
  58.               <td>
  59.                 <div>uoiuiufdiouiou</div>
  60.               </td>
  61.               <td>
  62.                 <div>uoiuiufdsfsdfiouiou</div>
  63.               </td>
  64.               <td>
  65.                 <div>uoiuiusiouiou</div>
  66.               </td>
  67.             </tr>
  68.             <tr>
  69.                 <td>
  70.                   <div>leftTitle2</div>
  71.                 </td>
  72.               <td>
  73.                 <div>uoiuiuiouiou</div>
  74.               </td>
  75.               <td>
  76.                 <div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiou</div>
  77.               </td>
  78.               <td>
  79.                 <div>uoiuiufdiouiou</div>
  80.               </td>
  81.               <td>
  82.                 <div>uoiuiufdsfsdfiouiou</div>
  83.               </td>
  84.               <td>
  85.                 <div>uoiuiusiouiou</div>
  86.               </td>
  87.             </tr>
  88.             <tr>
  89.                 <td>
  90.                   <div>leftTitle3</div>
  91.                 </td>
  92.               <td>
  93.                 <div>uoiuiuiouiou</div>
  94.               </td>
  95.               <td>
  96.                 <div>uoifdfdfuiuiouiou</div>
  97.               </td>
  98.               <td>
  99.                 <div>uoiuiufdiouiou</div>
  100.               </td>
  101.               <td>
  102.                 <div>uoiuiufdsfsdfiouiou</div>
  103.               </td>
  104.               <td>
  105.                 <div>uoiuiusiouiou</div>
  106.               </td>
  107.             </tr>
  108.             <tr>
  109.                 <td>
  110.                   <div>leftTitle4</div>
  111.                 </td>
  112.               <td>
  113.                 <div>uoiuiuiouiou</div>
  114.               </td>
  115.               <td>
  116.                 <div>uoifdfdfuiuiouiou</div>
  117.               </td>
  118.               <td>
  119.                 <div>uoiuiufdiouiou</div>
  120.               </td>
  121.               <td>
  122.                 <div>uoiuiufdsfsdfiouiou</div>
  123.               </td>
  124.               <td>
  125.                 <div>uoiuiusiouiou</div>
  126.               </td>
  127.             </tr>
  128.             <tr>
  129.                 <td>
  130.                   <div>leftTitle5</div>
  131.                 </td>
  132.               <td>
  133.                 <div>uoiuiuiouiou</div>
  134.               </td>
  135.               <td>
  136.                 <div>uoifdfdfuiuiouiou</div>
  137.               </td>
  138.               <td>
  139.                 <div>uoiuiufdiouiou</div>
  140.               </td>
  141.               <td>
  142.                 <div>uoiuiufdsfsdfiouiou</div>
  143.               </td>
  144.               <td>
  145.                 <div>uoiuiusiouiou</div>
  146.               </td>
  147.             </tr>
  148.             <tr>
  149.                 <td>
  150.                   <div>leftTitle6</div>
  151.                 </td>
  152.               <td>
  153.                 <div>uoiuiuiouiou</div>
  154.               </td>
  155.               <td>
  156.                 <div>uoifdfdfuiuiouiou</div>
  157.               </td>
  158.               <td>
  159.                 <div>uoiuiufdiouiou</div>
  160.               </td>
  161.               <td>
  162.                 <div>uoiuiufdsfsdfiouiou</div>
  163.               </td>
  164.               <td>
  165.                 <div>uoiuiusiouiou</div>
  166.               </td>
  167.             </tr>
  168.             <tr>
  169.                 <td>
  170.                   <div>leftTitle7</div>
  171.                 </td>
  172.               <td>
  173.                 <div>uoiuiuiouiou</div>
  174.               </td>
  175.               <td>
  176.                 <div>uoifdfdfuiuiouiou</div>
  177.               </td>
  178.               <td>
  179.                 <div>uoiuiufdiouiou</div>
  180.               </td>
  181.               <td>
  182.                 <div>uoiuiufdsfsdfiouiou</div>
  183.               </td>
  184.               <td>
  185.                 <div>uoiuiusiouiou</div>
  186.               </td>
  187.             </tr>
  188.             <tr>
  189.                 <td>
  190.                   <div>leftTitle8</div>
  191.                 </td>
  192.               <td>
  193.                 <div>uoiuiuiouiou</div>
  194.               </td>
  195.               <td>
  196.                 <div>uoifdfdfuiuiouiou</div>
  197.               </td>
  198.               <td>
  199.                 <div>uoiuiufdiouiou</div>
  200.               </td>
  201.               <td>
  202.                 <div>uoiuiufdsfsdfiouiou</div>
  203.               </td>
  204.               <td>
  205.                 <div>uoiuiusiouiou</div>
  206.               </td>
  207.             </tr>
  208.           </tbody>
  209.         </table>
  210. </div>
  211.         <script src="js/jquery-1.12.4.min.js"></script>
  212. <script type="text/javascript">
  213.     $.fn.scrollTab = function(){
  214.         var container = this;
  215.         container.find("table").after('<div class="table-lt" /><div class="table-top" /><div class="table-left" /><div class="table-right" />');
  216.         var ltTable = container.find(".table-lt"),
  217.             topTable = container.find(".table-top"),
  218.             leftTable = container.find(".table-left"),
  219.             rightTable = container.find(".table-right");
  220.  
  221.         var tab_lt = this.find("tbody tr:first-child td:first-child").remove(),
  222.             tab_top = this.find("tbody tr:first-child").remove(),
  223.             tab_left = this.find("tbody tr td:first-child").remove(),
  224.             tab_right = this.find("table");
  225.             this.find("table").remove();
  226.         ltTable.html('<table><tbody></tbody></table>').find("tbody").append(tab_lt[0]);
  227.         topTable.html('<div class="table-mask"><table><tbody></tbody></table></div>').find("tbody").append(tab_top);
  228.         leftTable.html('<div class="table-mask"><table><tbody></tbody></table></div>');
  229.         for(var td of tab_left){
  230.             var tr = document.createElement("tr")
  231.             tr.append(td)
  232.             leftTable.find("tbody").append(tr)
  233.         }
  234.         rightTable.append(tab_right[0]);
  235.         var containerWidth = 0,
  236.             containerHeight =0,
  237.  
  238.             ltTableWidth = 0,
  239.             ltTableHeight = 0,
  240.  
  241.             widthJson = {},
  242.  
  243.             timerLT = null;
  244.  
  245.             ltTableWidth = ltTable.width();
  246.             ltTable.width(ltTableWidth);
  247.             topTable.css("marginLeft",ltTableWidth);
  248.             leftTable.width(ltTableWidth);
  249.             rightTable.css("marginLeft",ltTableWidth);
  250.             ltTableHeight = ltTable.height();
  251.             leftTable.css("marginTop",ltTableHeight+"px");
  252.             rightTable.css("marginTop",ltTableHeight+"px");
  253.  
  254.             containerHeight = container.height();
  255.             containerWidth = container.width();
  256.             topTable.width(containerWidth - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
  257.             leftTable.height(containerHeight - ltTableHeight - (container.innerHeight() - container[0].clientHeight));
  258.  
  259.             // figure out the width of each DIV in TD  --start
  260.             function setDivWidth(obj){
  261.               $(obj).find("div").each(function(index){
  262.                 if(!widthJson[index]){
  263.                   widthJson[index] = 0;
  264.                 }
  265.                 if(widthJson[index]<$(this).width()) {
  266.                   widthJson[index] = $(this).width();
  267.                 }
  268.               });
  269.             }
  270.             topTable.find("tr").each(function(){
  271.               setDivWidth(this);
  272.             });
  273.             rightTable.find("tr").each(function(){
  274.               setDivWidth(this);
  275.             });
  276.  
  277.             topTable.find("tr:first div").each(function(index){
  278.               $(this).width(widthJson[index]);
  279.             });
  280.             rightTable.find("tr:first div").each(function(index){
  281.               $(this).width(widthJson[index]);
  282.             });
  283.             // figure out the width of each DIV in TD  --end
  284.  
  285.             container.scroll(function(){
  286.               var currentScrollTop = $(this).scrollTop(),
  287.                   currentScrollLeft = $(this).scrollLeft();
  288.               topTable.find(".table-mask").css("left", -currentScrollLeft+"px");
  289.               leftTable.find(".table-mask").css("top", -currentScrollTop+"px");
  290.  
  291.             });
  292.  
  293.             $(document).scroll(function(){
  294.               var currentScrollTop = $(this).scrollTop(),
  295.                   currentScrollLeft = $(this).scrollLeft();
  296.               ltTable.css("marginTop", -currentScrollTop+"px");
  297.               ltTable.css("marginLeft", -currentScrollLeft+"px");
  298.               topTable.css("marginTop", -currentScrollTop+"px");
  299.               topTable.css("marginLeft", ltTableWidth - currentScrollLeft+"px");
  300.               leftTable.css("marginTop", ltTableHeight - currentScrollTop+"px");
  301.               leftTable.css("marginLeft", -currentScrollLeft+"px");
  302.  
  303.             });
  304.  
  305.             $(window).resize(function(){
  306.               $(document).scroll();
  307.             });
  308.  
  309.             timerLT = setInterval(function(){
  310.               if(containerWidth != container.width() || containerHeight != container.height()){
  311.                 topTable.width(container.width() - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
  312.                 leftTable.height(container.height() - ltTableHeight - (container.innerHeight() - container[0].clientHeight));
  313.  
  314.                 containerWidth = container.width();
  315.                 containerHeight = container.height();
  316.  
  317.                 container.scroll();// for IE
  318.  
  319.               };
  320.  
  321.             },0);
  322.         }
  323.         $("#table-container").scrollTab();
  324.         </script>
  325.     </body>
  326. </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. AD_TLC549采集模拟信号

    AD_TLC549采集模拟信号 实验原理 芯片介绍 TLC549是 TI公司生产的一种低价位.高性能的8位A/D转换器,它以8位开关电容逐次逼近的方法实现 A/D转换,其转换速度小于 17us,最大转 ...

  2. 转发 VS 重定向

    转发:JSP容器将使用一个内部的方法来调用目标页面,新的页面继续处理同一个请求,而浏览器将不会知道这个过程.以前的request中存放的变量全部失效,并进入一个新的request作用域. 重定向:第一 ...

  3. 【OpenJudge 8463】Stupid cat & Doge

    http://noi.openjudge.cn/ch0204/8463/ 挺恶心的一道简单分治. 一开始准备非递归. 大if判断,后来发现代码量过长,决定大打表判断后继情况,后来发现序号不对称. 最后 ...

  4. CSS3幻灯片制作心得

    大神勿喷,这是小弟自己学习的痕迹. CSS3动画效果核心代码 @keyframes slideLeft { 0% { left: -500px; } 100% { ; } } @keyframes s ...

  5. 关于分页接口设计（下拉刷新上拉加载原理，解决page count请求重复数据的问题）

  6. web前端基础知识-（一）html基本操作

    1. HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样 ...

  7. IntelliJ IDEA 15 在线激活地址

    License server,直接输入http://www.iteblog.com/idea/key.php地址即可激活IntelliJ IDEA 15:

  8. windows下pip安装python模块时报错总结

    http://www.cnblogs.com/liaojiafa/p/5100550.html 前言: 这几天把python版本升级后,发现pip安装模块好多都报错(暂不确定是不是因为升级导致的),我 ...

  9. 转-ArcGIS Engine中的License设置

    AE开发中的License有两种方法进行设置,一种是通过LicenseControl控件,另一种是通过IAoInitialize接口设置.整个应用程序中只能有一种方式存在,如果进行了两种License ...

  10. 获取centos6.5系统信息脚本

    最近想尝试做两件比较重要的事情,第一是用python写个cmdb,第二还是用python写个小型监控系统,下面是获取系统信息的脚本: #!/usr/bin/env python # coding:ut ...