原文链接：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. [py][mx]django实现课程机构排名

    如果是第一次做这个玩意,说实话,确实不知道怎么弄, 做一次后就有感觉了 此前我们已经完成了: 分类筛选 分页 这次我们做的是 课程机构排名 知识点: - 按照点击数从大到小排名, 取出前三名 hot_ ...

  2. 2.5 The Object Model -- Observers

    Ember支持监视任何属性,包括计算的属性.你可以使用Ember.observer为一个对象设置一个监视者: Person = Ember.Object.extend({ //these will b ...

  3. 3vim编辑器

    三种模式命令行模式任何模式下 ESC 进入编辑模式(INSERT)从命令模式下 a, i 等 进入可视化模式(VISUAL)(VISUAL BLOCK)命令模式下,敲 v 进入非编辑模式, ctrl ...

  4. 2017-2018 ACM-ICPC, Asia Daejeon Regional Contest Solution

    A:Broadcast Stations 留坑. B:Connect3 题意:四个栈,每次放棋子只能放某个栈的栈顶,栈满不能放,现在给出(1, x) 表示黑子放在第x个栈的第一个位置,白子放在第b个栈 ...

  5. 466E - Information Graph 巧妙的判断祖先于孩子的关系

    这题说的是给了一个公司员工100000 然后现在又3种操作第一种将y置为x的父亲,第二种操作将文件给第x个人签他签完给他的上司签,一直到没有上司为止,第三种操作问x是否签了第i份文件,然后 我们只要直 ...

  6. FCKeditor配置与使用

    fckeditor - (1)资料介绍与安装 fckeditor介绍  FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器.  1.fckeditor官网:http://ww ...

  7. 在使用swiper时，解决同一个页面使用多个轮播出现问题做法

    $(".swiper-container").each(function(){ $(this).swiper({ loop: true, initialSlide :0, pagi ...

  8. OpenDayLight Helium安装

    参照:OpenDaylight的Helium(氦)版本安装 下载链接地址为 http://www.opendaylight.org/software/downloads/helium 安装: unzi ...

  9. Android之shape与selector实现圆角

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  10. 最好的移动触摸滑动插件：Swiper

    最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...