table 表头固定
<html>
<head>
<title>Test</title>
<style type="text/css">
.divClass{
height:400px;
width:25%;
overflow:auto;
}
.divHeadClass{
overflow:hidden;
}
</style>
</head>
<body>
<div id="htmlDivID" class="divClass">
<table style="word-break: break-all;background-color:#7f9db9;" border="0" cellspacing="1" cellpadding="0" >
<thead>
<tr style="background-color:#dfdfdf;">
<th width="20%" rowspan="1" colspan="1">Head</th>
<th width="5%" rowspan="1" colspan="1">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%" rowspan="1">head0</td>
<td width="5%" rowspan="1">0</td>
</tr>
<tr>
<td width="20%" rowspan="1">head50</td>
<td width="5%" rowspan="1">50</td>
</tr>
<tr>
<td width="20%" rowspan="1">head05</td>
<td width="5%" rowspan="1">05</td>
</tr>
<tr>
<td width="20%" rowspan="1">head40</td>
<td width="5%" rowspan="1">40</td>
</tr>
<tr>
<td width="20%" rowspan="1">head04</td>
<td width="5%" rowspan="1">04</td>
</tr>
<tr>
<td width="20%" rowspan="1">head70</td>
<td width="5%" rowspan="1">70</td>
</tr>
<tr>
<td width="20%" rowspan="1">head07</td>
<td width="5%" rowspan="1">07</td>
</tr>
<tr>
<td width="20%" rowspan="1">head10</td>
<td width="5%" rowspan="1">01</td>
</tr>
<tr>
<td width="20%" rowspan="1">head110</td>
<td width="5%" rowspan="1">011</td>
</tr>
<tr>
<td width="20%" rowspan="1">head02</td>
<td width="5%" rowspan="1">02</td>
</tr>
<tr>
<td width="20%" rowspan="1">head03</td>
<td width="5%" rowspan="1">03</td>
</tr>
<tr>
<td width="20%" rowspan="1">head066</td>
<td width="5%" rowspan="1">066</td>
</tr>
<tr>
<td width="20%" rowspan="1">head660</td>
<td width="5%" rowspan="1">60</td>
</tr>
<tr>
<td width="20%" rowspan="1">head055</td>
<td width="5%" rowspan="1">055</td>
</tr>
<tr>
<td width="20%" rowspan="1">head0</td>
<td width="5%" rowspan="1">0</td>
</tr>
<tr>
<td width="20%" rowspan="1">head0</td>
<td width="5%" rowspan="1">0</td>
</tr>
<tr>
<td width="20%" rowspan="1">head022</td>
<td width="5%" rowspan="1">022</td>
</tr>
<tr>
<td width="20%" rowspan="1">head220</td>
<td width="5%" rowspan="1">220</td>
</tr>
<tr>
<td width="20%" rowspan="1">head055</td>
<td width="5%" rowspan="1">055</td>
</tr>
<tr>
<td width="20%" rowspan="1">head034</td>
<td width="5%" rowspan="1">034</td>
</tr>
<tr>
<td width="20%" rowspan="1">head023</td>
<td width="5%" rowspan="1">023</td>
</tr>
<tr>
<td width="20%" rowspan="1">head021</td>
<td width="5%" rowspan="1">021</td>
</tr>
<tr>
<td width="20%" rowspan="1">head210</td>
<td width="5%" rowspan="1">210</td>
</tr>
<tr>
<td width="20%" rowspan="1">head012</td>
<td width="5%" rowspan="1">012</td>
</tr>
<tr>
<td width="20%" rowspan="1">head120</td>
<td width="5%" rowspan="1">120</td>
</tr>
<tr>
<td width="20%" rowspan="1">head0111</td>
<td width="5%" rowspan="1">0111</td>
</tr>
<tr>
<td width="20%" rowspan="1">head1110</td>
<td width="5%" rowspan="1">1110</td>
</tr>
</tbody>
</table>
</div>
</body>
<script language="javascript">
window.onload = function(){
//获得存放表格的DIV
var htmlDivDom = document.getElementById("htmlDivID");
//获得表格的头部的偏移高度
var theadHeight = htmlDivDom.children[0].children[0].offsetHeight;
//创建可见的头部DIV
var divHeadDom = document.createElement("<div class=\"divHeadClass\"></div>");
//将创建的头部添加到表格DIV的前面
htmlDivDom.parentNode.insertBefore(divHeadDom,htmlDivDom);
//并设置其高度为表格头部的偏移高度
divHeadDom.style.height = theadHeight;
//克隆表格
var htmlDivCloneDom = htmlDivDom.children[0].cloneNode(true);
//将克隆表格添加到头部DIV中
divHeadDom.appendChild(htmlDivCloneDom);
//设置表格的顶边距
htmlDivDom.children[0].style.marginTop = - theadHeight;
//设置头部DIV的宽度：由表格DIV的偏移宽度-滚动条的宽度
if(htmlDivDom.scrollHeight > htmlDivDom.clientHeight){
var scrollWidth = getScrollWidth();
divHeadDom.style.width = htmlDivDom.offsetWidth - scrollWidth;
}else{
divHeadDom.style.width = htmlDivDom.offsetWidth;
}
var rows = htmlDivDom.children[0].children[1].getElementsByTagName("tr");
for(var i =0,len=rows.length;i < len;i++){
if(i % 2 == 0){
rows[i].style.backgroundColor = "#f9f9f9";
}else{
rows[i].style.backgroundColor = "#e5f1ff"; }
}
} //创建一个DIV，添加到页面中，先得到没有滚动条的宽度，再得到有滚动条的宽度，两者的差就是滚动条的宽度
function getScrollWidth(){
var divDom = document.createElement("div");
divDom.style.cssText = "position:absolute;top:-1000;height:100px;width:100px;overflow:hidden;";
var noScrollWidth = document.body.appendChild(divDom).clientWidth;
divDom.style.overflow = "scroll";
var scrollWidth = divDom.clientWidth;
return noScrollWidth - scrollWidth;
}
</script>
</html>
table 表头固定的更多相关文章
- table表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
- HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...
- 纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- table表头固定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决
原文地址,转载请注明出处:http://www.cnblogs.com/jying/p/6294063.html 做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不 ...
- html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
随机推荐
- CMD/AMD
AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues ...
- Android M Developer Preview - API Preview(一)
API Overview The M Developer Preview gives you an advance look at the upcoming release for the Andro ...
- 关于sql row_number,rank,dense_rank，ntile函数
row_number排序最好用它,它依次排名,不出现相同名次,如:1,2,3,4,5 rank出现相同排名,且跳过相同的排名号排下一名,如:1,1,3,4,5, dense_rank出现相同排名,不跳 ...
- oracle数据库优化
1.不用“<>”或者“!=”操作符.对不等于操作符的处理会造成全表扫描,可以用“<” or “>”代替 不等于操作符是永远不会用到索引的,因此对它的处理只会产生全表扫描.推荐方 ...
- 第一个 MIC shared_memory 程序
设置Intel编译器的运行环境 在terminal中执行编译器的环境脚本 compilervars.sh: source <install-dir>/bin/compilervars.sh ...
- C#语法需要注意的地方
笔试中遇到的一些C#语法方面的问题,由于平时很少用到,笔试的时候模棱两可,现在做一个笔记. using System; using System.Collections.Generic; using ...
- Python3 面向对象 高级编程
正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性. class Student(object): pass 然后,尝试 ...
- 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形
现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到 ...
- PHP程序员的技术成长规划（送给迷茫的你）
按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...
- Sersync实时同步企业应用配置实战
一.实验环境 CentOS版本: 6.6(2.6.32.-504.el6.x86_64) Rsync版本: Rsync-3.0.6(系统自带) Sersync版本:sersync2.5.4_64bi ...