html固定table表頭的實現思路

時間 2019-11-24

標籤 html 固定 table 表頭實現思路欄目 HTML 简体版

原文原文鏈接

實現步驟css

1.將table放在可滾動容器中；
2.可滾動容器外層還須要一個容器，這個容器需設置超出範圍隱藏和定位(相對、絕對都行)；
3.利用腳本克隆一個目標table，調整克隆table的列寬與原table相同，隱藏tbody，追加到外層的容器中；
4.監聽滾動容器的滾動事件，動態調整克隆table的左偏移，上偏移不須要調整，由於已經固定了。html

效果演示前端

<html>
<head>
<style>
.tablebox{height:300px;overflow:auto;width:100%;}
.tableboxcontainer table td{white-space:nowrap;}
   .tableboxcontainer table thead{background:#ddd;}
.tableboxcontainer{position:relative;width:300px;overflow:hidden;}
</style>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="tableboxcontainer">
<div class="tablebox" id="tablebox">
<table class="table">
      <thead>
         <tr>
            <td>列1</td><td>列2</td><td>列3</td><td>列4</td><td>列5</td>
            <td>列6</td><td>列7</td><td>列8</td><td>列9</td><td>列10</td>
         </tr>
      </thead>
      <tbody>

      </tbody>
</table>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
      //生成表格測試數據
      var $table=$("#tablebox").find("table");
      var $tbody=$table.find("tbody");
      for(var i=0;i<20;i++){
         var $tr=$("<tr>");
         for(var j=0;j<10;j++){
            $tr.append(function(){
                  return $("<td>").text("行:"+(i+1)+"列:"+(j+1));
            });
         }
         $tr.appendTo($tbody);
      }
      //克隆原表，追加到最外層容器中
      var $table_fixed=$table.clone();
      var colwidths=[];
   //設置克隆表的列寬
      $tbody.find("tr:eq(0)").find("td").each(function(){
         var width=$(this).width()+parseFloat($(this).css("padding-left"))+parseFloat($(this).css("padding-right"));
         colwidths.push(width);
   });
      $table_fixed.find("thead td").each(function(i){
         $(this).width(colwidths);
   });
      $table_fixed.css({"position":"absolute","left":0,"top":0,"table-layout":"fixed"});
      $table_fixed.find("tbody").hide();//隱藏克隆表的tbody
      $("#tablebox").parent().append($table_fixed);
      //監聽原表容器的滾動事件
      $("#tablebox").bind("scroll",function(){
         var left=$(this).scrollLeft();
         $table_fixed.css({"left":-left});
      });
});
</script>
</body>
</html>jquery

WEB前端互動交流羣 434623999bootstrap

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。