原文链接：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. Windows中杀死某个端口的进程

    最近写项目,总是出现端口被占用的问题,原来傻傻的把电脑重启一下,终于有一天受不了了,想要想办法解决.刚开始从网上找了好多教程,发现不行.开始自己尝试,终于,成功的将占用端口的进程杀掉.在此记录下过程( ...

  2. Flask系列(二)Flask基础

    知识点回顾 1.flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi(上线) 2.实例化Flask对象,里面是有参数的 app = F ...

  3. Flask上下文管理及源码刨析

    基本流程概述 - 与django相比是两种不同的实现方式. - django/tornado是通过传参数形式实现 - 而flask是通过上下文管理, 两种都可以实现,只不实现的方式不一样罢了. - 上 ...

  4. 牛客国庆集训派对Day1 Solution

    A    Tobaku Mokushiroku Kaiji 水. #include <bits/stdc++.h> using namespace std; ], b[]; void Ru ...

  5. Python numpy有什么用？

    NumPy is the fundamental package for scientific computing with Python.就是科学计算包. a powerful N-dimensio ...

  6. Conductor

    https://netflix.github.io/conductor/ High Level Architecture

  7. # 20145118 《Java程序设计》第4周学习总结 ## 教材学习内容总结

    20145118 <Java程序设计>第4周学习总结 教材学习内容总结 本周内容为教材第六.七两张内容. 重点概念: 1.面向对象中,子类继承父类,避免重复的行为定义,是一种简化操作. 2 ...

  8. 20145322 何志威《网络对抗》shellcode注入&Return-to-libc攻击深入

    基础知识 Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将堆栈的返回地址利用缓冲区溢出,覆盖成为指向 shellcode的地址. execstack - ...

  9. js模拟类的创建以及继承的四部曲

    <script> 1)创建父类 function Person(){ } Person.prototype.age = 18;//给父类添加属性 var p1 = new Person() ...

  10. 使用webuploader实现文件的断点续传

    webuploader是百度Fex团队开发的一款上传插件,对于现代浏览器采用了HTML5的方式进行上传,二为了兼容IE浏览器则采用了Flash的方式作为补充. 首先,这个插件在全局仅暴露一个WebUp ...