原文链接：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. centos 邮件服务 腾讯企业邮箱（免费） 使用iRedmail 需要有公网的centos主机 发邮件协议：smtp 端口25 收邮件协议：pop3 端口110 iredmail安装配置 使用邮箱系统 第三十一节课

    centos   邮件服务  腾讯企业邮箱(免费) 使用iRedmail 需要有公网的centos主机 发邮件协议:smtp 端口25  收邮件协议:pop3 端口110  iredmail安装配置 ...

  2. Nginx 403 forbidden原因及故障模拟重现(转载)

    这篇文章是转载过来的一篇文章,觉得不错,因此做个记录. 访问Nginx出现状态码为403 forbidden原因及故障模拟 1) nginx配置文件里不配置默认首页参数或者首页文件在站点目录下没有 i ...

  3. 【Lua】模块与包

    定义:         从用户观点来看,一个模块就是一个程序库,可以通过require来加载(require用于使用模块,module用于创建模块),然后便得到了一个全局变量,表示一个table,这个 ...

  4. 网络协议TCP、Http、webservice、socket区别

    网络协议TCP.Http.webservice.socket区别 http 和 webservice 都是基于TCP/IP协议的应用层协议 webservice是基于http的soap协议传输数据 w ...

  5. C语言头文件#include<stdlib.h>的作用

      stdlib 头文件即standard library标准库头文件 stdlib 头文件里包含了C.C++语言的最常用的系统函数 该文件包含了的C语言标准库函数的定义 stdlib.h里面定义了五 ...

  6. JavaScript的基础语法

    对于Javascript的而言没有数据类型的全部都是通过var来定义创建的.比如: <!DOCTYPE html> <html> <head> <meta c ...

  7. java之进程和线程

    1.进程和线程的通俗例子. 2.进程和线程关系.

  8. 【运维技术】node项目使用strongloop进行部署相关教程

    node项目使用strongloop进行部署相关教程 安装strongloop 下载安装node 解压到路径完成安装 使用软链方式配置环境变量 添加cnpm的淘宝镜像源 安装node-gyp的模块依赖 ...

  9. Linux学习笔记之Linux通过yum安装桌面

    Centos系统最小化安装以后,进入默认是命令行模式,所以需要进一步安装桌面. 1,本文使用的是CentOS 7 Minimal版本. 2,启动linux操作系统,进入后没有图形界面,但是有时候还是希 ...

  10. Redis学习笔记之Linux下Redis的安装和部署

    0x00 Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相 ...