用2个层来显示 table 第一行 定位 效果。 支持ie6/ie7/ff/chrome,两个方向滚动条 ，保证最后一列也能对齐

能保持最后一列对齐原理：动态显示header行的最后一个行。

 

效果

 

Header A

Header B

Header C

Header C

A	B	CCC	CCC
A	B	CCC	CCC
A	B	CCC	CCC
A	B	CCC	CCC
A	B	CCC	CCC
A	B	CCC	CCC
A	B	CCC	CCC
A	B	CCC	CCC
A	B	CCC	CCC

代码

<script type="text/javascript">// <![CDATA[
			   var EventUtil = new Object;
                EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
                    if (oTarget.addEventListener) {
                        oTarget.addEventListener(sEventType, fnHandler, false);
                    } else if (oTarget.attachEvent) {
                        oTarget.attachEvent("on" + sEventType, fnHandler);
                    } else {
                        oTarget["on" + sEventType] = fnHandler;
                    }
                };

				var oo = function(){
					var div = document.getElementById("divContent");
					var left = div.scrollLeft;
					var div2 = document.getElementById("divHeader");
					div2.scrollLeft = left;

					var disWidth = div.children[0].style.width.replace("px","")-div.style.width.replace("px","");
					if(div.scrollLeft >= disWidth ){
						var ddd= document.getElementById("lastTd");
						ddd.width = ddd.clientWidth+19;
					}
				}

				window.onload = function() {
                    var oDiv = document.getElementById("divContent");   
                    EventUtil.addEventHandler(oDiv, "scroll", oo);
                }
// ]]></script>
<p> </p>
<div style="margin-right: auto; margin-left: auto; overflow: auto;" id="div1All">
<div style="overflow: hidden; margin-right: auto; margin-left: auto; width: 600px;" id="divHeader">   
     
<table style="margin-top: -2px; width: 800px;" border="1" cellspacing="0">
<tbody>
<tr id="idTr" style="background: none repeat scroll 0% 0% navy; color: white; height: 30px;" class="fixedHeaderTr">
<td nowrap="nowrap" width="200">Header   A</td>
<td nowrap="nowrap" width="100">Header   B</td>
<td nowrap="nowrap" width="200" >Header   C</td>
<td nowrap="nowrap"  id="lastTd">Header   C</td>
</tr>
</tbody>
</table>
</div>

<div style="overflow: auto; margin-right: auto; margin-left: auto; height: 150px; width: 600px;" id="divContent">   
            
			
<table style="width: 800px;padding-top:0;border-top-width: 0;" border="1" cellspacing="0">
<tbody>
		<tr>
			<td width="200">A</td>
			<td width="100">B</td>
			<td nowrap="nowrap" width="200">CCC</td>
			<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
		<td >A</td>
		<td >B</td>
		<td nowrap="nowrap" >CCC</td>
		<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
		<td >A</td>
		<td >B</td>
		<td nowrap="nowrap" >CCC</td>
		<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
					<td >A</td>
					<td >B</td>
					<td nowrap="nowrap" >CCC</td>
					<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
				<td >A</td>
				<td >B</td>
				<td nowrap="nowrap" >CCC</td>
				<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
					<td >A</td>
					<td >B</td>
					<td nowrap="nowrap" >CCC</td>
					<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
				<td >A</td>
				<td >B</td>
				<td nowrap="nowrap" >CCC</td>
				<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
					<td >A</td>
					<td >B</td>
					<td nowrap="nowrap" >CCC</td>
					<td nowrap="nowrap" >CCC</td>
		</tr>
		<tr>
				<td >A</td>
				<td >B</td>
				<td nowrap="nowrap" >CCC</td>
				<td nowrap="nowrap" >CCC</td>
		</tr>
		</tbody>
</table>
</div>
</div>