table固定多层表头的问题
0
悬赏园豆：20
[已解决问题]
解决于 2009-02-16 13:13
这两天忙于table固定多层表头的实现，实现过程中有一个问题困扰了我很久还没有解决，现把问题贴出来，如果哪位博友知道解决方法的话麻烦指点一下，先谢谢了！
未固定多表头前图片如下所示：
添加样式固定多表头后表头不对齐，并且挡住显示数据，图片如下所示：
在COL4上面设置ROWSPAN=2
出现了错误
经过不断的测试，是类似这种情况：列上面显示的最后一个单元格上面设置ROWSPAN都会出现这个问题。没有找到解决办法，郁闷，请知道的博友帮忙解决一下，先谢谢了。
最佳答案
0
疯子阿飞的可以！
原地址：http://www.afei.name/test.htm
我改后的HTML
<html>
<head>
<title>Test</title>
<style type="text/css">
/* 疯子阿飞的样式 */
table.fixtable thead tr{background:#EEE;}
div.thead{overflow:hidden;}
div.tbody{width:200px;height:100px;overflow-y:auto;}
/* 楼主的样式 */
div.c{overflow:auto; width:200px;height:100px;}
table.t thead td{position:relative; background-color:#ddd;}
table.t thead tr{position:relative; top:expression(this.offsetParent.scrollTop);}
</style>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width=50%>
<!-- 疯子阿飞的HTML -->
<div id=d1 class="tbody">
<table id=t1 class="fixtable">
<thead id=th1>
<tr><td colspan="2">Idddd</td></tr>
<tr><td rowspan="2">Idddd</td><td>Name</td></tr>
<tr><td>Name</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>Mic</td></tr>
<tr><td>2</td><td>Mic</td></tr>
<tr><td>3</td><td>Mic</td></tr>
<tr><td>4</td><td>Mic</td></tr>
<tr><td>5</td><td>Mic</td></tr>
</tbody>
</table>
</div>
</td>
<td width=50%>
<!-- 楼主的HTML -->
<div class="c">
<table class="t">
<thead>
<tr><td colspan="2">COL04</td></tr>
<tr><td rowspan="2">COL04</td><td>COL05</td></tr>
<tr><td>COL05</td></tr>
</thead>
<tbody>
<tr><td>D101</td><td>D102</td></tr>
<tr><td>D201</td><td>D202</td></tr>
<tr><td>D301</td><td>D302</td></tr>
<tr><td>D401</td><td>D402</td></tr>
<tr><td>D501</td><td>D502</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
<script language="javascript">
var tHeadHeight = document.all["th1"].offsetHeight;
var divTbody=document.all["d1"];
var divThead=document.createElement("<div class='thead'></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宽度与最初的DIV宽度一样
divThead.style.width = divTbody.offsetWidth;
</script>
</html>
其他回答(1)
0
mark...
