前几天忙于table固定多层表头的实现，现对其实现过程进行总结如下：思路1：完全通过样式来实现，但实现过程中发现页面在Visual Studio 2008、Dreamweaver等开发工具中预览没有任何问题，但在IE显示的时候表头显示不正常，具体问题可参见 求“table固定多层表头”所遇问题的解答! ，有博友说是“IE的BUG吧。实际的rowspan居然与位于第几行有关（顶部的没多，位于第二行的，多一行，位于第三行的，多二行……）。试几种方法都避不开。”，具体是什么原因到现在还没弄明白（此思路暂未能实现，具体原因还没找到，希望知道的博友帮忙回答一下）；思路2：通过JS+样式来实现，先把完整表画在页面上，然后在页面加载后，利用脚本，把表头部分在原表中隐藏，之后，在这张完整数据表的上面加一个单独的表，这个表只装表头，不过在统一两个表的列宽的时候花费了我不少力气（此思路已实现）。
前几天忙于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的高度(设置为表头高度+前十条记录的高度)
divTbody.style.height = 250+tHeadHeight;
//存放头部的DIV宽度与最初的DIV宽度一样
if(divTbody.scrollHeight-divTbody.clientHeight>0)
{
divThead.style.width = divTbody.offsetWidth-getScrollerWidth();
}
else
{
divThead.style.width = divTbody.offsetWidth;
}
//计算滚动条的宽度
function getScrollerWidth(){
var wrapper = document.createElement('div');
wrapper.style.overflow = 'scroll';
wrapper.style.width = '100px';
wrapper.style.height = '100px';
var inn = document.createElement('div');
inn.style.width = '200px';
inn.style.height = '200px';
wrapper.appendChild(inn);
document.body.appendChild(wrapper);
wrapper.scrollLeft = 400;
var scrWidth = wrapper.scrollLeft - 100;
document.body.removeChild(wrapper);
return scrWidth;
}
function getHeadTableWidth()
{
var tHeadHeight = document.all["th1"][0].offsetHeight;
var divTbody=document.all["d1"];
var tHeadWidth = divTbody.offsetWidth;
if(divTbody.scrollHeight-divTbody.clientHeight>0)
{
tHeadWidth = tHeadWidth-getScrollerWidth();
}
divThead=document.getElementById('headtable');
divThead.style.width = tHeadWidth;
divThead.style.height = tHeadHeight;
document.all["DataGrid1"][1].style.marginTop = -tHeadHeight;
}
window.onresize=function(){getHeadTableWidth()};
</script>
</BODY></HTML>
思路1实现固定单层表头（奇怪，使用同样的方法，对于实现固定单表头成功，但对于实现固定多层表头却有问题）：
效果图如下：
实现代码：
Code<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<style type="text/css">
<!--
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}
table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
.td
{
nowrap:'true';
}
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 100%;
}
/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
\html div.tableContainer/* */ {
padding: 0 16px 0 0
}
/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer {
height: auto;
padding: 0;
width: 740px
}
/* Reset overflow value to hidden for all non-IE browsers. */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer {
height: 285px;
overflow: hidden;
width: 756px
}
/* define width of table. IE browsers only */
/* if width is set to 100%, you can remove the width */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
float: left;
width: 100%
}
/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
\html div.tableContainer table/* */ {
margin: 0 -16px 0 0
}
/* define width of table. Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer table {
float: none;
margin: 0;
width: 740px
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer table {
width: 756px
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative;
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body thead[class].fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body tbody[class].scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child+body thead[class].fixedHeader th {
width: 200px
}
head:first-child+body thead[class].fixedHeader th + th {
width: 250px
}
head:first-child+body thead[class].fixedHeader th + th + th {
border-right: none;
padding: 4px 4px 4px 3px;
width: 316px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child+body tbody[class].scrollContent td {
width: 200px
}
head:first-child+body tbody[class].scrollContent td + td {
width: 250px
}
head:first-child+body tbody[class].scrollContent td + td + td {
border-right: none;
padding: 2px 4px 2px 3px;
width: 300px
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}
-->
</style>
</head><body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
<th><a href="#">Header 4</a></th>
<th><a href="#">Header 5</a></th>
<th><a href="#">Header 6</a></th>
<th><a href="#">Header 7</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td nowrap>Even More Cell Content 1</td>
<td nowrap>Even More Cell Content 2</td>
<td nowrap>Even More Cell Content 3</td>
<td nowrap>Even More Cell Content 4</td>
<td nowrap>Even More Cell Content 5</td>
<td nowrap>Even More Cell Content 6</td>
<td nowrap>Even More Cell Content 7</td>
</tr>
<tr>
<td nowrap>Even More Cell Content 1</td>
<td nowrap>Even More Cell Content 2</td>
<td nowrap>Even More Cell Content 3</td>
<td nowrap>Even More Cell Content 4</td>
<td nowrap>Even More Cell Content 5</td>
<td nowrap>Even More Cell Content 6</td>
<td nowrap>Even More Cell Content 7</td>
</tr>
</tbody>
</table>
</div>
</body></html>
思路1实现固定单表头及固定列：
效果图：
实现代码：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{font-size:12px;}
.t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
.t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
.t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
.t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
.dd{height:200px!important; height:208px; overflow-y:hidden;}
.t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
.t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
.ee{width:618px!important; width:620px}
.t_i_h table{width:600px;}
.t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
.cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
.cc table{width:600px; }
.cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
</style>
<script>
function aa(){
var a=document.getElementById("cc").scrollTop;
var b=document.getElementById("cc").scrollLeft;
document.getElementById("dd").scrollTop=a;
document.getElementById("hh").scrollLeft=b;
}
</script>
</head>
<body>
<div class="t_n">
<span>序号</span>
<div class="dd" id="dd">
<table cellpadding="0" cellspacing="0" border="0" class="t_number">
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--table栏目-->
<div class="t_i">
<div class="t_i_h" id="hh">
<div class="ee">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10%">栏目A</td>
<td width="20%">栏目B</td>
<td width="10%">栏目C</td>
<td width="20%">栏目D</td>
<td width="20%">栏目E</td>
<td width="20%">栏目F</td>
</tr>
</table>
</div>
</div>
<div class="cc" id="cc" onscroll="aa()">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10%">1</td>
<td width="20%">1</td>
<td width="10%">1</td>
<td width="20%">1</td>
<td width="20%">1</td>
<td width="20%">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
</div>
</div>
</body>
</html>
实现表头固定，表体可滚动的GridView：
效果图：
实现方式及代码可参考：http://blog.csdn.net/net_lover/archive/2006/10/10/1328729.aspx
本文参考资料：
http://www.dlmu.net/pe/webdesign/ShowArticle.asp?ArticleID=26970
http://blog.csdn.net/szwangdf/archive/2008/07/31/2750468.aspx
