解决方法：

  1.  //设置表格表头里的th==表格内容里的td
  2.         function ThEqualTd(thId, tdId) {
  3.             var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数
  4.             var tdW = "";//清空tdW的宽度
  5.             for (i = 0; i < tdNum; i++) {
  6.                 tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度，定义其等于tdW
  7.                 document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW
  8.             }
  9.         }

这里就本人的leonaScroll-1.3.js滚动条插件遇到的上述问题做详细说明

根据滚动条，我们做好布局，如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.      <title></title>
  6.      <meta charset="utf-8" />
  7.      <script src="jquery-1.10.2.js"></script>
  8.      <script src="leonaScroll-min-1.3.js"></script>
  9.  </head>
  10.  <body>
  11.      <style>
  12.          .table{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px;   }
  13.          .table table{ line-height:25px;border:1px solid #000000;  }
  14.          .table table td,.table table th{height:25px; text-align:center;  }
  15.      </style>
  16.      <div class="table">
  17.          <table>
  18.              <tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr>
  19.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  20.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  21.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  22.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  23.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  24.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  25.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  26.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  27.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  28.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  29.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  30.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  31.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  32.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  33.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  34.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  35.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  36.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  37.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  38.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  39.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  40.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  41.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  42.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  43.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  44.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  45.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  46.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  47.              <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  48.          </table>
  49.      </div>
  50.      <script>
  51.          $(".table").LeonaScroll();
  52.      </script>
  53.  </body>
  54.  </html>

问题：上述代码可以实现表格内容超出.table界定的400px时就，出现滚动条，并可以滚动显示内容，但是却出现一个问题，那就是我们的表头也会随内容一起向上滚动，以至于用户在查看地下内容时无法直观的看见我们的表头，而使表格做不到一目了然。针对这个问题，我做了以下处理：

1、首先将HTML的布局做调整，将表头和内容分别写在不同的table里，如下：

  1.   <style>
  2.          .all{width:500px; height:400px;border:1px solid #b6ff00; border-radius:10px; }
  3.           table td,.table table th{height:25px; text-align:center;  }
  4.          .tableTh{width:100%; height:25px; }
  5.          .tableTd{width:100%; height:375px;}
  6.          .tableTd table{ line-height:25px;border:1px solid #000000;  }
  7.  
  8.      </style>
  9.  
  10.      <div class="all"><!--整体全部（表头+外框）-->
  11.  
  12.          <table class="tableTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th></tr></table><!--表头-->
  13.  
  14.          <div class="tableTd"><!--外框（内容+滚动条）-->
  15.              <table><!--内容-->
  16.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  17.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  18.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  19.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  20.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  21.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  22.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  23.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  24.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  25.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  26.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  27.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  28.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  29.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  30.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  31.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  32.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  33.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  34.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  35.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  36.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  37.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  38.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  39.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  40.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  41.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  42.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  43.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  44.                  <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
  45.              </table>
  46.          </div>
  47.      </div>
  48.      <script>
  49.          $(".tableTd").LeonaScroll();
  50.      </script>

2、这样，由于表头与内容分隔，且表头不在滚动文本内容区域内，再滚动时，就会发现表头会一直冻结在表格内容之上。但是正因为分隔到不同的table中，又出现了一个问题，表格的th与td宽度不等。

这里如果你的td是设定死的宽度，那就很好办了，th宽度=td宽度就好了。然后很多时候我们使用表格，他的td是随内容长度大小去自适应变更的，所以这个时候我们就需要下面这段js，使他们实时相等了。

在这里我讲这段封成了一个方法，以便其调用：

  1.  <script>
  2.          $(".tableTd").LeonaScroll();//滚动条调用
  3.  
  4.          ThEqualTd("tabTh", "tabTd");//调用th=td
  5.  
  6.          //设置表格表头里的th==表格内容里的td
  7.          function ThEqualTd(thId, tdId) {
  8.              var tdNum = document.getElementById(tdId).rows[0].cells.length;//获取tdId表格中的第一行的列数
  9.              var tdW = "";//清空tdW的宽度
  10.              for (i = 0; i < tdNum; i++) {
  11.                  tdW = document.getElementById(tdId).rows[0].cells[i].offsetWidth;//获取tdId表格中的第一行第i列的宽度，定义其等于tdW
  12.                  document.getElementById(thId).rows[0].cells[i].width = tdW;//设置thId表格的第一行第i列的宽度=tdW
  13.              }
  14.          }
  15.      </script>

3、恩，差不多可以看到效果了，但是，还差最后一步，也是细节，不可忽视哟！那就是我们还应该在考虑到滚动条占的位置，也就是我们的th表头里是没有滚动条的，然而，为了让表格的表头和内容更加协调。我们应该再加一个空的th，给其设置宽度等于滚动条所占的宽度，如下：

  1. <table class="tableTh" id="tabTh"><tr><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th>表头</th><th width="14"></th></tr></table><!--表头-->4、

ok，这下就大功告成了。

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/5950280.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接

JaveScript-解决表格使用滚动条时冻结表头栏问题的更多相关文章

  1. 解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题

    问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...

  2. WPF拖动DataGrid滚动条时内容混乱的解决方法

    WPF拖动DataGrid滚动条时内容混乱的解决方法 在WPF中,如果DataGrid里使用了模板列,当拖动滚动条时,往往会出现列表内容显示混乱的情况.解决方法就是在Binding的时候给Update ...

  3. QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默认排序

    目录 一.原生表格 二.效果展示 三.实现方式 1.排序列定制 2.排序交互修改 四.相关文章 原文链接:QRowTable表格控件(五)-重写表头排序.支持第三次单击恢复默认排序 一.原生表格 开发 ...

  4. 解决表格里面使用text-overflow后依旧不能隐藏超出的文本

    解决表格里面使用text-overflow后依旧不能隐藏超出的文本 来源: http://blog.csdn.net/colinmuxi/article/details/9069595  (非原创,自 ...

  5. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  6. 解决CSharpGL使用CGCompiler时发现的几个问题

    解决CSharpGL使用CGCompiler时发现的几个问题 为了获取CSharpShadingLanguage的token流,我设计了这样一个文法: <Expression> ::= & ...

  7. 解决远程桌面链接时出现"The RPC server is unavailable."或"RPC服务器不可用"的问题

    解决远程桌面链接时出现"The RPC server is unavailable."或"RPC服务器不可用"的问题 解决远程桌面链接时出现"The ...

  8. js Table冻结表头示例代码

    Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头  function  ...

  9. Swift - 将表格UITableView滚动条移动到底部

    有时我们需要通过代码自动将表格UITableView滚动条移动到尾部,只需要使用scrollToRowAtIndexPath方法即可,代码如下: 1 2 3 4 5 var secon = 1 //最 ...

随机推荐

  1. 【中文分词】二阶隐马尔可夫模型2-HMM

    在前一篇中介绍了用HMM做中文分词,对于未登录词(out-of-vocabulary, OOV)有良好的识别效果,但是缺点也十分明显--对于词典中的(in-vocabulary, IV)词却未能很好地 ...

  2. 导出BOM表

    1.Report->Bill of Materials for Project 将Value拖上左上角的Grouped Columns 2.在Excel表中全选器件,右键设置"设置单元 ...

  3. STM32F746的RTC使用

    1.RTC模块采用低速晶振外接始终:32.768KHz,如下图所示 2.配置RTC模块: 其中,Fck_apre.Fck_spre始终上配置不容易理解, 如果想得到1Hz的始终频率,则需要将PERDI ...

  4. Gate Of Babylon bzoj 1272

    Gate Of Babylon (1s 128MB) babylon [问题描述] [输入格式] [输出格式] [样例输入] 2 1 10 13 3 [样例输出] 12 [样例说明] [数据范围] 题 ...

  5. MySQL引擎、索引和优化（li）

    一.存储引擎 存储引擎,MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术 ...

  6. Redis主从复制

    大家可以先看这篇文章ASP.NET Redis 开发对Redis有个初步的了解 Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此 ...

  7. 【IOS开发笔记03-视图相关】简单计算器的实现

    UIView 经过前几天的快速学习,我们初步了解的IOS开发的一些知识,中间因为拉的太急,忽略了很多基础知识点,这些知识点单独拿出来学习太过枯燥,我们在今后的项目中再逐步补齐,今天我们来学习APP视图 ...

  8. Android进阶--Acticivity的启动模式

    一.引言 我们在多次启动同一个Activity时,系统默认会重复创建多个实例,这样看上去便十分的愚蠢,所以android在设计时提供了启动模式来修改系统的默认行为.目前有四种启动模式:standard ...

  9. Git 少用 Pull 多用 Fetch 和 Merge

    本文有点长而且有点乱,但就像Mark Twain Blaise Pascal的笑话里说的那样:我没有时间让它更短些.在Git的邮件列表里有很多关于本文的讨论,我会尽量把其中相关的观点列在下面. 我最常 ...

  10. layer弹出信息框API

    首先向大家推荐layer,在这里也非常感谢贤心的贡献,非常不错的信息框及弹出层解决方案,为一些项目的前端开发提高了很大的效率,希望layer 越办越好! 下面是API,呵呵,官方抄袭过来的,为了自己看 ...