JavaScript固定表头_js scroll-view 固定表头-优快云博客

本文介绍了一种使用JavaScript实现Table表头固定的方法。通过复制表头并利用滚动事件更新其位置，使得在滚动长表格时表头始终可见。文章提供了完整的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个固定表头的需求，在网上找了资料，都不是我想要的效果；根据表格内容自动调整宽度，在查询方法最后加入scroll(viewid,scrollid)；viewid表格所在Id，scrollid容器所在Id

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>表头固定</title>
  <style type="text/css">
#box{
  width:100%;
  height:400px;
  overflow-y:auto;
  position:relative;
 }

#tab th{ background-color:#FFF; }
</style>
<SCRIPT  type="text/javascript" >

 function scroll(viewid,scrollid){
     // 获取滚动条容器
  var scroll = document.getElementById(scrollid);
     // 将表格拷贝一份
  var tb2 = document.getElementById(viewid).cloneNode(true);
     //如果该div存在，
     deleteDiv("fixedDiv");
     // 创建一个div
  var bak = document.createElement("div");
     bak.setAttribute("id", "fixedDiv");
     // 将div添加到滚动条容器中
  scroll.appendChild(bak);
     // 将拷贝得到的表格在删除数据行后添加到创建的div中
  bak.appendChild(tb2);
     // 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative）
  bak.style.position = "absolute";
     // 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的）
  bak.style.display = "block";    
     bak.style.width='100%';
     bak.style.height = "25px";
     bak.style.overflow="hidden";
    // 设置创建的div的left属性为0，即该div与滚动条容器紧贴
  bak.style.left = 0;
     // 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头
  bak.style.top = "0px";
     // 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端
  scroll.onscroll = function(){
         // 设置div的top值为滚动条距离滚动条容器顶部的距离值
   bak.style.top = this.scrollTop+"px";
  }
 }
 
  function deleteDiv(id){
     var my = document.getElementById(id);
     if (my != null){
      my.parentNode.removeChild(my);
     }
  }

// 在页面加载完成后调用该方法
window.onload = function (){
 scroll("tab","box");
}
  function deleteDiv(id){
     var my = document.getElementById(id);
     if (my != null){
      my.parentNode.removeChild(my);
     }
  }
</SCRIPT>
 </head>
 <body>
 <div id="box">
  <table id="tab" width="100%" border="1" cellspacing="0" cellpsaveing="0">
   <tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>户籍</th><th>身份</th></tr>
   <tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
   <tr><td>2</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
   <tr><td>3</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
   <tr><td>4</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
   <tr><td>5</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
   <tr><td>6</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
   <tr><td>7</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
   <tr><td>8</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
   <tr><td>9</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
   <tr><td>10</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
   <tr><td>11</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
   <tr><td>12</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
   <tr><td>13</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
   <tr><td>14</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
   <tr><td>15</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
   <tr><td>16</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
   <tr><td>17</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
   <tr><td>18</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
   <tr><td>19</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
   <tr><td>20</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
   <tr><td>21</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
   <tr><td>22</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
   <tr><td>23</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
   <tr><td>24</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
  </table>
 </div>
 </body>
</html>

参考资料：

javaScript固定table表头

http://blog.youkuaiyun.com/qq378527566/article/details/7786126

div高度控制

http://blog.youkuaiyun.com/sweetsoft/article/details/6512978

js移除div

http://www.cnblogs.com/carekee/articles/1727841.html