原文链接：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. （1.5）DML增强功能-try catch及事务控制

    一.事务控制与Try Catch结合 当 SET XACT_ABORT 为 ON 时,如果执行 Transact-SQL 语句产生运行时错误,则整个事务将终止并回滚. 当 SET XACT_ABORT ...

  2. Python 面向对象 类 __str__

    class dog(object): def __init__(self,name): self.name = name d = dog('mike') print(d) # <__main__ ...

  3. centos HA高可用集群 heartbeat搭建 heartbeat测试 主上停止heartbeat服务 测试脑裂 两边都禁用ping仲裁 第三十二节课

    centos   HA高可用集群  heartbeat搭建 heartbeat测试  主上停止heartbeat服务  测试脑裂  两边都禁用ping仲裁  第三十二节课 heartbeat是Linu ...

  4. java-mybaits-00101-基础安装配制

    一.数据库安装 http://jingyan.baidu.com/article/363872ec2e27076e4ba16fc3.html 二.eclipse连接mysql http://jingy ...

  5. SSL/TSL握手过程详解

    1. Client Hello 握手第一步是客户端向服务端发送 Client Hello 消息,这个消息里包含了一个客户端生成的随机数 Random1.客户端支持的加密套件(Support Ciphe ...

  6. [转载]ODBC数据源

    在做java数据库连接的时候遇到了点问题. 首先是创建数据源时,odbc里没有要用的驱动,因为我是64位的系统,但是安装的是32位的office..于是去C/windows/syswow64文件夹下, ...

  7. jQuery Form

    https://github.com/jquery-form/form#type 概念 jQuery表单插件允许您轻松,无差错地升级HTML表单以使用AJAX. 主要方法ajaxForm和ajaxSu ...

  8. Android开发新手问题

    因为最近在用空闲时间学习Android开发,期间确实遇到了一些问题.而且因为我之前在公司里一直都是在使用Eclipse进行开发,所以最初我学习Android时也就选择了Google的包含android ...

  9. Visual Studio Code常用设置

    Visual Studio Code常用设置 • 自动保存设置 ▶ 文件(F) -> 首选项(P) -> 用户设置(U) ▶ 将"files.autoSave": &q ...

  10. 微信 audio 获取 duration 为 NaN 的解决方法

    先加load() myaudio.load(); myaudio.oncanplay = function () { alert(myaudio.duration); } load() 方法用于在更改 ...