首页 新闻 搜索 专区 学院

table固定多层表头的问题

0
悬赏园豆:20 [已解决问题] 解决于 2009-02-16 13:13

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

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

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


 
在COL4上面设置ROWSPAN=2

 

出现了错误

 

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

问题详细情况

飛雪飄寒的主页 飛雪飄寒 | 初学一级 | 园豆:30
提问于:2009-02-11 11:36
< >
分享
最佳答案
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>

yzx99 | 初学一级 |园豆:137 | 2009-02-11 19:09
其他回答(1)
0

mark...

Jared.Nie | 园豆:1940 (小虾三级) | 2009-02-11 12:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册