<style>
#box{
height:214px;
width:500px;
overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */
position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */
}
table,tr,td,th{
border:1px solid #ccd;
border-collapse:collapse;
}
table{
width:100%;
}
td{
height:24px;
width:50px;/** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */
line-height:24px;
padding:3px 5px;
background-color:#ddd;
word-break:break-all;/** 设置当文本过长时换行 */

}

th{
height:24px;
width:50px;/** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */
line-height:24px;
background-color:#cfc;
}
</style>

//固定表头
/**
* 功能：固定表头
* 参数 viewid 表格的id
* scrollid 滚动条所在容器的id
* size 表头的行数（复杂表头可能不止一行）
*/
function scroll(viewid,scrollid,size){
// 获取滚动条容器
var scroll = document.getElementById(scrollid);
// 将表格拷贝一份
var tb2 = document.getElementById(viewid).cloneNode(true);
// 获取表格的行数
var len = tb2.rows.length;
// 将拷贝得到的表格中非表头行删除
for(var i=tb2.rows.length;i>size;i--){
// 每次删除数据行的第一行
tb2.deleteRow(size);
}
// 创建一个div
var bak = document.createElement("div");
// 将div添加到滚动条容器中
scroll.appendChild(bak);
// 将拷贝得到的表格在删除数据行后添加到创建的div中
bak.appendChild(tb2);
// 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative）
bak.style.position = "absolute";
// 设置创建的div的背景色与原表头的背景色相同（貌似不是必须）
bak.style.backgroundColor = "#cfc";
// 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的）
bak.style.display = "block";
// 设置创建的div的left属性为0，即该div与滚动条容器紧贴
bak.style.left = 0;
// 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头
bak.style.top = "0px";
// 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端
scroll.onscroll = function(){
// 设置div的top值为滚动条距离滚动条容器顶部的距离值
bak.style.top = this.scrollTop+"px";
};
};

<html>
<body>
<div id="box">
<table id="tab">
</table>
</div>
</body>
</html>

调用

// 在页面加载完成后调用该方法

window.onload = function (){

scroll("tab","box",1);

}

固定table表头的更多相关文章

  1. js简单固定table表头及css问题分析。

    <head> <meta name="viewport" content="width=device-width" /> <tit ...

  2. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  3. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  4. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

  5. table表头固定

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  7. HTML table表头固定

    HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...

  8. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  9. Javascript 固定表格表头

    遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...

随机推荐

  1. can't set android permissions - built without android support

    /**************************************************************************** * can't set android pe ...

  2. luogu 4782【模板】 2-SAT 问题

    2-SAT就是给出$m$个限制表示$x==val_x || y==val_y$ 求出满足的解 每个点拆成两个点,如果$x$不满足则$y$一定满足,$y$不满足同理.这样我们连边,然后$tarjan$即 ...

  3. iOS之strong和copy

    深拷贝和浅拷贝 深拷贝和浅拷贝主要是对类类型而言的,浅拷贝就是指针拷贝,深拷贝是对象拷贝. property的strong和copy 在接触iOS程序时经常会看到程序某些类类型属性被strong修饰, ...

  4. sizeof（）解析（原）

    (一)基本概念     sizeof操作符以字节形式给出了其操作数的存储大小.操作数可以是一个表达式或括在括号内的类型名.操作数的存储大小由操作数的类型决定. (二)使用方法 1.用于数据类型     ...

  5. 016--python文件处理

    一.操作文件流程 1.打开文件,得到文件句柄并赋值给一个变量 2.通过句柄对文件进行操作 3.关闭文件 示例代码: f = open('chenli.txt') #打开文件 first_line = ...

  6. 算法练习--LeetCode--17. Letter Combinations of a Phone Number

    Letter Combinations of a Phone NumberMedium Given a string containing digits from 2-9 inclusive, ret ...

  7. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时26&&27

    课时26 图像分割与注意力模型(上) 语义分割:我们有输入图像和固定的几个图像分类,任务是我们想要输入一个图像,然后我们要标记每个像素所属的标签为固定数据类中的一个 使用卷积神经,网络为每个小区块进行 ...

  8. maven构建web项目，cannot be cast to javax.servlet.Servlet

    今天开发web的时候,需要用到servlet-api,于是在pom.xml中添加依赖 <dependency> <groupId>javax.servlet</group ...

  9. python __builtins__ float类 （25）

    25.'float', 用于将整数和字符串转换成浮点数. class float(object) | float(x) -> floating point number | | Convert ...

  10. bzoj 3796: Mushroom追妹纸【二分+后缀数组+st表】

    把三个串加上ASCII大于z的分隔符连起来,然后求SA 显然每个相同子串都是一个后缀的前缀,所以枚举s1的每个后缀的最长和s2相同的前缀串(直接在排序后的数组里挨个找,最近的两个分别属于s1和s2的后 ...