CSS表格固定表头示例
css+JavaScript实现表格的表头固定效果，页面滚动，表头处于页面最顶端。
CSS表格固定表头示例代码如下
<!doctype html>
<html >
<head>
<title>CSS表格固定表头</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
* html,* html body /* 修正IE7振动/闪动bug */{background-image:url(about:blank);background-attachment:fixed;}
body {margin: 0;padding: 0;}
td {width: 200px;line-height: 30px;}
table {width: 2000px; }
#th {background-color: #888888;position: fixed;/*IE8+和标准浏览器fixed定位*/ width: 2000px;height: 30px;top: 0;left: 0;}
#wrap {position: relative;padding-top: 30px;}
</style>
<!--小于IE8增加css expression结合上面的修正css才有用，用js的onscroll事件来设置top属性还是会闪动。-->
<!--[if lt IE 8]>
<script>var ie7min=true</script>
<style>#th{position:absolute;top:expression(eval(document.documentElement.scrollTop));}</style>
<![endif]-->
<script type="text/javascript">
if (!window.ie7min) {//IE8+和标准浏览器fixed定位，当有水平滚动条，水平滚动时需要设置fixed定位对象的left属性，要不会滚动导致表头和内容无法对齐
var obj_th, sl, osl ;
window.onload = function () {
obj_th = document.getElementById("th");
osl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
window.onscroll = function () {
sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
if (sl != osl) {
obj_th.style.left = -sl + 'px'
osl = sl;
}
};
};
}
</script>
</head>
<body style="height:2000px">
<div id="wrap">
<table cellpadding="0" cellspacing="0">
<tr id="th">
<script>
var col = 10;
for (var i = 0; i < col; i++) document.write('<td>表头' + i + '</td>')
</script>
</tr>
<script>
for (var j = 0; j < 30; j++) {
document.write('<tr>');
for (var i = 0; i < col; i++) document.write('<td>内容' + j + '-' + i + '</td>');
document.write('</tr>');
}
</script></table></div></body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：CSS表格固定表头示例