对 web 中用什么办法固定一个表的表头，google, baidu, being 了很多，发现满意的没有，要么不能跨浏览器，要么一个单元格内容大一点就把样式撑乱了。
后来了一下ligerUI，发现它有这个功能，做得很不错，但是要在一个已经开发到一定程度的项目中使用它也不现实，对其它模块影响太大。通过查看它生成的 dom 对象，给了我重要提示。
原来，ligerUI是通过两个 table 实现固定表头的。两个table放在各自的 div 中，前一个用于显示固定表头，后一个显示表的内容；为了避免当单元格内容（包括表头）太长而把单元格撑宽，每个单元格内的内容都嵌套在两层div中，外层的 div 和所在单元格的div保持一至的宽、高，并且设置 style.overflow = hidden，然后内层的div设置足够的宽度，显示单元格的内容：
<th style="width: 100px;" align="left"> <div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Name ssss<div></div> </th>
由于内容框里可能显示垂直滚动条，因此表头需要多一个列，宽度和放置内容table的垂直滚动条相同，大约是22个像素
然后就是需要捕捉内容div的水平滚动条的滚动事件了，当水平滚动条被拖动时，表头的水平位置也同步滚动
$(document).ready(function(){
$("#divBody").scroll(function(eventObj){
var left = $("#divBody").scrollLeft();
$("#divHead").scrollLeft(left);
});
});
经测试，在IE、FireFox、Google Chrome, Safari 都运行正常，完整的代码如下，这里用到了js中流行的 jquery，没有的话自己去下吧
<html>
<head>
<title>Table</title>
<script type="text/javascript" src="jquery1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divBody").scroll(function(eventObj){
var left = $("#divBody").scrollLeft();
$("#divHead").scrollLeft(left);
});
});
</script>
</head>
<body>
<div style="width:240px; height:200px; border: black solid 1px">
<div id="divHead" style="width:240px; overflow : hidden">
<table id="tbHead" style="width:410px; padding:0px; margin:0px; border-collapse: collapse" border="1" bordercolor="black">
<tr style="height:24px">
<th style="width: 100px;" align="left">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Name ssss<div></div>
</th>
<th style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</th>
<th style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</th>
<th></th>
</tr>
</table>
</div>
<div id="divBody" style="width: 240px; height: 172px; border: 0px black solid; padding: 0px; margin: 0px; overflow: scroll;">
<table id="tbBody" style="width:280px; padding:0px; margin:0px; border-collapse: collapse" border="1" bordercolor="black">
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
<tr style="height:24px">
<td style="width: 100px">
<div style="width:100px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Smith<div></div>
</td>
<td style="width: 140px">
<div style="width:140px; height:24px; overflow: hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address sssssssss<div></div>
</td>
<td style="width:140px">
<div style="width:140px; height:24px; overflow:hidden; border:0px; padding:0px; margin:0px"><div style="width:240px; height:24px">Address</div></div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>