jq表头固定

 

<!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>

 

posted @ 2016-11-22 15:57  chengJun—  阅读(253)  评论(0编辑  收藏  举报