原文链接：http://www.th7.cn/web/js/201509/121055.shtml

参考链接：http://www.jb51.net/article/102568.htm

写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为demo代码实现：

<table>    <thead class="header">    <tr><th>姓名</th><th>爱好</th>    </tr>    </thead></table><div id='scrollContainer' style="height:300px;overflow-y:auto;" ><table class="table" cellspacing=0 cellpadding=0 id="mytable"><tbody><tr>    <td>一介码妞</td><td>吉他</td></tr></tbody></table></div><!-- 以下的js只是为了批量生成数据，真正固定表头的方法是fixTabHeader --><script type="text/javascript">$(document).ready(function(){    var row=$("#mytable >tbody>tr:first");    for(i=0;i<80;i++){$('table#mytable > tbody').append(row.clone());     }     $("#mytable").fixedHeader(); });</script>
<script type="text/javascript">function fixTabHeaderScroll(tabid){    var $parent,$head,pTop,oTop,headTop,o;o=$("#"+tabid);oTop=o.height();$parent=o.parent();pTop=$parent.height();$head=$parent.prev();if (pTop <=oTop) {$head.css({width:$head.outerWidth(true)-scrollBarWidth+"px"});}else{$head.css({width:100+"%"});}}</script>
    • 分析 
      　　这种方式应该是最简单，最明了的实现方式，表头和表内容分家，各管各家，对于表头来说，不管表内容滚或者不滚，它都在哪里不离不弃。但是存在一个问题，在表内容没有滚动时，表头和表身是垂直对齐的，一旦表身出现滚动，新出现的滚动条会占用表身的部分宽度，这就导致表身和表头又不对齐。所以，我们需要在给两个表格应用同样样式的基础上，再用js函数控制两个的宽度，使他们宽度一致，大体思路是获取滚动条的宽，然后设置表头的宽度减去滚动条的宽度。 
      补充介绍Jquery的几个参数： 
      offsetWidth ：当前对象的的宽度包括滚动条在内 
      scrollWidth ：当前对象的滚动宽度不包括滚动条在内 
      在css的盒子模型中，最内部是content，然后是padding、border、margin 
      width=content 
      innerWidth = width + padding 
      outerWidth = innerWidth + border 
      outerWidth(true) = outerWidth + margin 
      关于outerWidth属性有一个传入参数可以控制它包不包含外部的margin 为true的话包含，默认不包含。 
      注意：要想表格相对于某个父容器做数据滚动，则该父容器必须做如下设置： 
      (1)设置固定高度,不设置高度或者用百分比设置高度，滚动不起作用 
      (2)设置属性overflow-y:auto 
      　必选项，否则当表格数据过多时，不会产生滚动条，而是自动延长该父容器的高度 
      (3)设置 position:relative; 
      　若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body

      我的代码：
      <html>
      
    <head>
      
        <title>test scrollTop</title>
      
        <style type="text/css">
      
            #ttitle{
      
                    width:100px;
      
                    border:1px solid blue;
      
                    height:27px;
      
            }
      
            #tcontent{
      
                    width:100px;
      
                    border:1px solid red;
      
                    height:100px;
      
                    overflow:auto;
      
            }
      
            tr{
      
                height:20px;
      
            }
      
            table{
      
                width:100px;
      
                border:1px solid black;
      
            }
      
        </style>
      
        <script type="text/javascript">

        </script>
      
    </head>
      
    <body>
      
        <div id="ttitle">
      
            <table>
      
                <th>姓名</th>
      
                <th>年龄</th>
      
            </table>
      
        </div>
      
        <div id="tcontent">
      
            <table>
      
                <tr style="width">
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
                <tr>
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
                <tr>
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
                <tr>
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
                <tr>
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
                <tr>
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
                <tr>
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
                <tr>
      
                    <td>guo</td>
      
                    <td>21</td>
      
                </tr>
      
            </table>
      
        </div>
      
    </body>

</html>

js固定表头的实现（转）的更多相关文章

  1. js 固定表头及固定列的js

    //给table 外层加一个div然后将divid传入方法,arr是一个数组里面填写需要固定的列数function fixedCol(arr,divId){ var colArr = arr || [ ...

  2. 固定表头/锁定前几列的代码参考[JS篇]

    引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活 ...

  3. jQuery 关于ScrollableGridPlugin.js（固定表头）插件的逐步解析

    以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...

  4. 原生javascript 固定表头原理与源码

    我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫  "freeze- ...

  5. JQuery固定表头插件fixedtableheader源码注释

    在开发XX车站信息系统时,需要将大量数据显示在一个巨大的表格内部,由于表格是一个整体,无法分页,加之数据很多,超出一屏,为了方便用户,决定使用固定表头的插件,经过测试,发现JQuery 插件:fixe ...

  6. 固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  7. jQuery制作多表格固定表头、切换表头的特效

    做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...

  8. Bootstrap-table固定表头并解决表头与内容不对齐

    写在前面: 之前在做表格的时候,一直忽略了表格的height高度,导致表格的的表头不能固定,这个样子当表格数据过多的时候,导致无法分辨表头是什么,所以决定固定表头. 固定表头需要使用height这一属 ...

  9. bootstrap-table固定表头固定列

    1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...

随机推荐

  1. 验证url的正则

    一. '/@(?i)\b((?:[a-z][\w-]+:(?:/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()& ...

  2. android的selector选择器

    1. drawable/actionbar_compat_item.xml 2.drawable/actionbar_compat_item_pressed.xml 3.drawable/action ...

  3. MDF文件损坏，如何恢复？（未解决）

    MDF文件损坏,如何恢复?MDF附加失败,数据库附加失败 1.附加时 2.用替换法设置后重建日志 (其实已经删掉日志了,确保操作之前没有日志,但是运行 alter database [test] Re ...

  4. shell 变量定义技巧总结

    可以多学习和模仿操作系统自带的/etc/init.d/functions函数库脚本的定义思路,多学习Linux系统脚本中的定义,有经验的读者最终应形成一套适合自己的规范和习惯. (1)变量名及变量内容 ...

  5. python模块之xlrd（excl调用模块）

    一.安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装,前提是已经安装了python 环境. 二.使用介绍 1.导入模块 import x ...

  6. HDFS的Java API

    HDFS Java API 可以用于任何Java程序与HDFS交互,该API使我们能够从其他Java程序中利用到存储在HDFS中的数据,也能够使用其他非Hadoop的计算框架处理该数据 为了以编程方式 ...

  7. http webservice socket的区别

    1 数据传输方式1.1 socket传输的定义和其特点    所谓socket通常也称作"套接字",实现服务器和客户端之间的物理连接,并进行数据传输,主要有udp和tcp两个协议. ...

  8. docker——libnetwork插件网络功能

    从1.7.0版本开始,Docker正是把网络和存储这两部分的功能都以插件化形式剥离出来,允许用户通过指令来选择不同的后端实现.剥离出来的独立容器网络项目叫libnetwork,从名字就能看出,它希望将 ...

  9. docker——安全防护与配置

    Docker是基于Linux操作系统实现的应用虚拟化.运行在容器内的进程,跟运行在本地系统的进程本质上并无区别,配置不合适的安全策略将可能给本地系统带来安全风险,因此,Docker的安全性在生产环境中 ...

  10. WordPress配置

    1.准备工作: 下载comsenzexp.exe 下载wordpress.zip 2.安装comsenzexp.exe,安装有个wwwroot目录: 3.解压wordpress.zip,然后ctrl+ ...