前几天忙于table固定多层表头的实现，现对其实现过程进行总结如下：
思路1：完全通过样式来实现，但实现过程中发现页面在Visual Studio 2008、Dreamweaver等开发工具中预览没有任何问题，但在IE显示的时候表头显示不正常，具体问题可参见 求“table固定多层表头”所遇问题的解答! ，有博友说是“IE的BUG吧。实际的rowspan居然与位于第几行有关（顶部的没多，位于第二行的，多一行，位于第三行的，多二行……）。试几种方法都避不开。”，具体是什么原因到现在还没弄明白（此思路暂未能实现，具体原因还没找到，希望知道的博友帮忙回答一下）；
思路2：通过JS+样式来实现，先把完整表画在页面上，然后在页面加载后，利用脚本，把表头部分在原表中隐藏，之后，在这张完整数据表的上面加一个单独的表，这个表只装表头，不过在统一两个表的列宽的时候花费了我不少力气（此思路已实现）。
思路2实现效果图：
思路2实现代码：
Code<HEAD><TITLE>Test</TITLE>
<STYLE type=text/css>TABLE {
BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; MARGIN: 0px; BORDER-LEFT: #333 1px solid; WIDTH: 500px; LINE-HEIGHT: 35px; BORDER-BOTTOM: #333 1px solid; BORDER-COLLAPSE: collapse
}
TD {
BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; BORDER-BOTTOM: #ff0000 1px solid; TEXT-ALIGN: center
}
THEAD TR {
BACKGROUND: #D3EAFE
}
DIV.thead {
PADDING-LEFT: 1px; OVERFLOW: hidden; PADDING-TOP: 1px
}
DIV.tbody {
OVERFLOW-Y: auto; PADDING-LEFT: 1px; OVERFLOW-X: hidden; WIDTH: 520px; PADDING-TOP: 1px; HEIGHT: 100px
}
DIV.tbody TABLE {
}
TBODY {
MARGIN-TOP: -100px
}
</STYLE>
</HEAD>
<BODY>
<div id=d1 class="tbody">
<table id=t1 class="fixtable">
<thead id=th1>
<tr>
<td rowspan="4">姓名</td>
<td rowspan="4">性别</td>
<td rowspan="4">公民身份证号</td>
<td rowspan="4">纵向序号</td>
<td colspan="10">籍贯</td>
</tr>
<tr>
<td rowspan="3">北京市</td>
<td rowspan="3">市辖区</td>
<td colspan="8">天津</td>
</tr>
<tr>
<td rowspan="2">和平区</td>
<td rowspan="2">河东区</td>
<td rowspan="2">河西区</td>
<td rowspan="2">南开区</td>
<td rowspan="2">河北区</td>
<td colspan="3">天津下属县</td>
</tr>
<tr>
<td>宁河县</td>
<td>静海县</td>
<td>藓县</td>
</tr>
</THEAD>
<TBODY>
<TR>
<TD>张三</TD>
<TD>女</TD>
<TD>3526198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>李四</TD>
<TD>男</TD>
<TD>4401198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>张三</TD>
<TD>女</TD>
<TD>3526198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>李四</TD>
<TD>男</TD>
<TD>4401198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>张三</TD>
<TD>女</TD>
<TD>3526198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>李四</TD>
<TD>男</TD>
<TD>4401198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>张三</TD>
<TD>女</TD>
<TD>3526198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
<TR>
<TD>李四</TD>
<TD>男</TD>
<TD>4401198512302589</TD>
<TD>1</TD>
<TD>12</TD>
<TD>51</TD>
<TD>11</TD>
<TD>54</TD>
<TD>3</TD>
<TD>4</TD>
<TD>6</TD>
<TD>51</TD>
<TD>3</TD>
<TD>8</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<script type ="text/javascript" >
var tHeadHeight = document.all["th1"].offsetHeight;
var divTbody=document.all["d1"];
var divThead=document.createElement("<div id='headtable' class='thead' style ='float :left'></div>");
//把存放头部的DIV加到存放主体的DIV（最初的DIV）的前面
divTbody.parentNode.insertBefore(divThead, divTbody);
//存放头部的DIV高度为表头高度
divThead.style.height = tHeadHeight;
//存放头部的DIV内容与最初的DIV的内容一样
divThead.innerHTML = divTbody.innerHTML;
//存放主体的表格顶端为负数，让人看不到表头
document.all["t1"][1].style.marginTop = -tHeadHeight;
//设置存放主体的DIV的高度(设置为表头高度+前十条记录的高度)