标签：
数据展示时，表头的固定，可以有更好的可读性。
一、实现方式：
1、定义2个表格，一个absolute固定
<div class="table1-wapper">
<table width="100%" cellpadding="0" cellspacing="0" id="table1">
<tr><th><div>序号</div></th><th><div>股票名称</div></th>...</tr>
<tr>...</tr>
</table>
</div>
<div class="fixed-table1-wapper">
<table width="100%" cellpadding="0" cellspacing="0" id="fixed-table1">
</table>
</div>
2、表1<th>复制，并插入表2
var th_new=$("#table1 tr").eq(0).clone();
$("#fixed-table1").append(th_new);
3、resize()方法，实时获取表1各列<th>宽度
function trResize(){
$("#fixed-table1 th").each(function(){
var num=$(this).index();
var th_width=$("#table1 th").eq(num).width();
$(this).css("width",th_width+"px");
});
}
4、页面过小时，表格滚动带表头滚动
$(".table1-wapper").scroll(function(){
var scroll=-$(this).scrollLeft()
$(".fixed-table1-wapper").css("left",scroll+"px");
});
二、注意细节：
1、宽度自适应、去除单元格间隙：
<table width="100%" cellpadding="0" cellspacing="0" ></table>
2、表格线：
直接<td>添加border，会出现边线重合；添加属性：border-collapse: collapse;
3、td宽度：
控制第一行宽度即可 <td width="70"></td> / <td width="20%"></td>
4、奇偶行颜色不同：
css: #table1 tr:nth-child(2n){background-color:#ccc;} ie7兼容性问题
jquery: $("#table1 tr:even").css("background-color","#ccc");
以下为完整代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格整理</title>
<link rel="stylesheet" type="text/css" href="css/basic.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
html{overflow:auto;}
.table-wapper{width:100%;margin:30px auto;font-size:16px;position:relative;overflow:hidden;}
.table1-wapper{height:200px;overflow-y:auto;}
.table-wapper table{border:1px solid #f00;line-height:2;border-collapse: collapse;white-space:nowrap;}
.table-wapper th{font-size:18px;font-weight:normal;background-color:#dbdbdb;}
.table-wapper td{text-align:center;border:1px solid #f00;}
.fixed-table1-wapper{position:absolute;top:0px;left:0px;background-color:#dbdbdb;}
/*#table1 tr:nth-child(2n){background-color:#ccc;}*/
</style>
</head>
<body >
<div class="table-wapper">
<div class="table1-wapper">
<table width="100%" cellpadding="0" cellspacing="0" id="table1">
<tr>
<th>序号</th>
<th>股票名称</th>
<th>股票代码</th>
<th>成交</th>
<th>涨跌幅</th>
<th>换手率</th>
<th>行业板块</th>
</tr>
<tr>
<td>1</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>2</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>3</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>4</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>5</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>6</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>7</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>8</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>9</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
<tr>
<td>10</td>
<td>光明乳业</td>
<td>600597</td>
<td>15.2</td>
<td>+6.23%</td>
<td>0.12%</td>
<td>食品饮料</td>
</tr>
</table>
</div>
<div class="fixed-table1-wapper">
<table width="100%" cellpadding="0" cellspacing="0" id="fixed-table1">
</table>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#table1 tr:even").css("background-color","#ccc"); //奇偶行颜色
var inner_width=$("#table1").outerWidth();
$(".fixed-table1-wapper").css("width",inner_width+"px");
var th_new=$("#table1 tr").eq(0).clone();
$("#fixed-table1").append(th_new);
})
$(window).resize(function(){
trResize();
});
$(".table1-wapper").scroll(function(){
var scroll=-$(this).scrollLeft()
$(".fixed-table1-wapper").css("left",scroll+"px");
});
function trResize(){
var inner_width=$("#table1").outerWidth();
$(".fixed-table1-wapper").css("width",inner_width+"px");
$("#fixed-table1 th").each(function(){
var num=$(this).index();
var th_width=$("#table1 th").eq(num).width();
//console.log("th_width:"+th_width);
$(this).css("width",th_width+"px");
});
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/chaoli/p/5809195.html
