这两天忙于table固定多层表头的实现，实现过程中有一个问题困扰了我很久还没有解决，现把问题贴出来，如果哪位博友知道解决方法的话麻烦指点一下，先谢谢了！

　　未固定多表头前图片如下所示：

　　添加样式固定多表头后表头不对齐，并且挡住显示数据，图片如下所示：


下面先列出我的实现步骤：（红色字体部分为困扰我的问题）

在表头上要固定位置，首先是需要一个容器，如果你不使用容器，则浏览器自身就是一个容器,要显示滚动条，容器必须使用CSS风格overflow:auto这样才能自动显示滚动条，别忘了，DIV会自动增长高度，所以第一个限制条件来了:

如果要使用固定表头的表格，表格（外部容器）的高度必须设置值。

我们填充数据到表格中，下面对数据就不展示了，只展示Header就是了。

<style>
    div.c{overflow:auto;width:600px;height:200px;border:solid 2px red; }
    table.t thead td{background-color:#ccc;font-weight:bold;}
</style>
<div class="c">
<table border="1" class="t">
    <thead>
    <tr><td>COL01</td><td>COL02</td><td>COL03</td>….</tr>
    </thead>
<tbody><tr>…..</tr></tbody>
</table>
</div>

显示结果如下：

 

设置表头固定则需要做以下几个步骤

  1. 设置表头TR的位置为相对位置，这样才能定位表头TR到表格容器的顶部。
  2. 设置表头TR的位置TOP属性为动态获取的容器的位置。

我们修改TR的属性如下

table.t thead tr{position:relative;top:expression(this.offsetParent.scrollTop);}

这个CSS使得表头纵向固定位置了。

我们尝试在THEAD中增加多行，也没有问题，接下来，是该我们测试表头跨行跨列的问题了，我们添加三行，增加了一个跨行

 

这个时候显示的问题出现了

 

一行代码搞定这个东东

table.t thead td{background-color:#ccc;font-weight:bold;position:relative;}

我们增加了更多的跨行跨列都测试成功

 

问题来了，我们设置在COL4上面设置ROWSPAN=2

 

出现了错误

 

经过不断的测试，是类似这种情况：列上面显示的最后一个单元格上面设置ROWSPAN都会出现这个问题。没有找到解决办法，郁闷，请知道的博友帮忙解决一下，先谢谢了。

下面试着设置固定的列位置，我简单的写出CSS就可以了，大家自己琢磨吧

table.t thead td.fix{position:relative;left:expression(this.parentElement.offsetParent.scrollLeft);}
    table.t tbody td.fix{position:relative;left:expression(this.parentElement.offsetParent.parentElement.scrollLeft);}

 

效果如下

 

呵呵，很混乱是不是？原因是背景和Zindex的问题，修正之后CSS为

 

还有不尽如人意的地方就是空白的地方有透明，呵呵，怎么解决呢？还是修正CSS

 

完整CSS如下

<style>
    div.c{background-color:white;display:inline;overflow:auto;width:600px;height:200px;border:solid 2px red;}
    table.t thead td{background-color:#ccc;font-weight:bold;position:relative;}
    table.t tbody td{background-color:white;}
    table.t thead tr{z-index:100;position:relative;top:expression(this.offsetParent.scrollTop-2);}    
    table.t thead td.fix{z-index:200;background-color:red;position:relative;left:expression(this.parentElement.offsetParent.scrollLeft-2);}
    table.t tbody td.fix{z-index:50;background-color:red;position:relative;left:expression(this.parentElement.offsetParent.parentElement.scrollLeft-2);}        
</style>

表格完整脚本如下

<div class="c">
<table border="1" class="t" cellSpacing=0 cellPadding=2 border=0>
    <thead>
        <tr><td class="fix">COL01_1</td><td rowspan="3">COL02</td><td rowSpan="2">COL03</td><td colspan="2">COL04</td>.........</tr>
        <tr><td class="fix">COL01_2</td><td>COL04</td><td>COL05</td>.........</tr>
        <tr><td class="fix">COL01_3</td><td>COL03</td><td>COL04</td><td>COL05</td>.........</tr>
    </thead>
    <tbody>
        <tr><td class="fix">ROW01</td>.........</tr>
        <tr><td class="fix">ROW02</td>.........</tr>
        <tr><td class="fix">ROW03</td>.........</tr>
        <tr><td class="fix">ROW04</td>.........</tr>
    </tbody>
</table>
</div>

信息来源：http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx