table固定表头

来源：互联网发布：ubuntu vbox 打不开编辑：程序博客网时间：2024/05/28 05:14

在项目中用到了table表格，数据较多出现了滚动条随之出现的问题就是，滚掉条滚动的时候，table表头也被“滚”跑了。想要修改这个问题只好采用固定table的表头了。

固定表头一般都是一列表头，我这里是两列的表头，网上有类似的解决方法，不过我是采用的另一种方法。

查找的资料解决办法：

<html><head> <style type="text/css"> body,table, td, a { font:9pt; } /*重点：固定行头样式*/.scrollRowThead {     position: relative;      left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);     z-index:0;} /*重点：固定表头样式*/.scrollColThead {     position: relative;      top: expression(this.parentElement.parentElement.parentElement.scrollTop);     z-index:2;}/*行列交叉的地方*/.scrollCR {     z-index:3;} /*div外框*/.scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 100%; }/*行头居中*/.scrollColThead td,.scrollColThead th{     text-align: center ;}/*行头列头背景*/.scrollRowThead,.scrollColThead td,.scrollColThead th{background-color:EEEEEE;}/*表格的线*/.scrolltable{border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }/*单元格的线等*/.scrolltable td,.scrollTable th{     border-left: 1px solid #CCCCCC;      border-top: 1px solid #CCCCCC;      padding: 5px; } </style> <script></script></head><body > <div id="scrollDiv" class="scrollDiv" > <table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable"> <tr class="scrollColThead"  > <th class="scrollRowThead scrollCR"  > </th> <th colspan="2">列头</th><th colspan="4">列头</th>  </tr><tr class="scrollColThead"  > <th class="scrollRowThead scrollCR"  >h1</th> <th >h2</th> <th >h3</th> <th >h4</th> <th >h5</th> <th >565656</th> </tr><tr> <td class="scrollRowThead"  ><input type="checkbox" name="checkbox" value="checkbox">  a</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td> </td> </tr> <tr><td class="scrollRowThead"  ><input type="checkbox" name="checkbox2" value="checkbox">  b</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td> </td></tr> <tr> <td nowrap class="scrollRowThead"  ><input type="checkbox" name="checkbox3" value="checkbox">  1</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td> </td></tr> <tr> <td class="scrollRowThead"  ><input type="checkbox" name="checkbox4" value="checkbox">  2</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td> </td></tr><tr> <td class="scrollRowThead"  ><input type="checkbox" name="checkbox5" value="checkbox">  3</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td> </td></tr> <tr> <td class="scrollRowThead"  ><input type="checkbox" name="checkbox6" value="checkbox">  4</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td> </td></tr> <tr> <td class="scrollRowThead" ><input type="checkbox" name="checkbox7" value="checkbox">  5</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td>11;</td></tr> </table> </div>  </body></html>

页面样式为：

下面是我的解决方法，主要是把复合表头做成一个table放入到td里面。

在一下代码里还涉及到项目中的一些样式，这里并没有写下了，不过不影响功能

/*重点：固定行头样式*/.scrollRowThead {     position: relative;      left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);     z-index:0;}/*重点：固定表头样式*/.scrollColThead {     position: relative;      top: expression(this.parentElement.parentElement.parentElement.scrollTop);     z-index:2;}/*行列交叉的地方*/.scrollCR {     z-index:3;} .scrolltable{border: #dadada 1px solid ; }.scrollTable td{ border-left: #dadada 1px solid ;  border-right: #dadada 1px solid ; border-top: #dadada 1px solid ;  border-bottom: #dadada 1px solid ;  }.tdBgcolor{background-color:#303030;   }

html部分代码：

var table_Create = "" + "<table class=\"dojoxGridRowTable scrolltable\" cellspacing=\"0\" cellpadding=\"0\" style='font:12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif;'>" + "<tr style='font-size:14px;text-align:center; align:center' class='scrollColThead'>" + "<td class=\"dojoxGridCell tdBgcolor\"  width='50px'><div class=\"dojoxGridSortNode\">序号</div></td>" + "<td class=\"dojoxGridCell tdBgcolor\"  width='70px'><div class=\"dojoxGridSortNode\">发文日期</div></td>" + "<td class=\"dojoxGridCell tdBgcolor\"  width='70px'><div class=\"dojoxGridSortNode\">批准日期</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" width='150px'><div class=\"dojoxGridSortNode\">主送单位</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\"   width='120px'><div class=\"dojoxGridSortNode\">我方发文号</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\"  width='150px'><div class=\"dojoxGridSortNode\">文件名称</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" width='230px'><div class=\"dojoxGridSortNode\">发文部门</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" width='100px'><div class=\"dojoxGridSortNode\">答复函件号</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" colspan='3' width='120px'>" +"<table class=\"dojoxGridRowTable\"><tr style='background-color:#303030;font-size:14px;color:#CCCCCC;text-align:center; align:center'>" +"<td colspan='3'><div class=\"dojoxGridSortNode\">回复情况</div></td></tr><tr style='background-color:#303030;font-size:14px;color:#CCCCCC;text-align:center; align:center'>" +"<td class=\"dojoxGridCell tdBgcolor\" width='40px'><div class=\"dojoxGridSortNode\">无需<br>回复</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" width='40px'><div class=\"dojoxGridSortNode\">未<br>回复</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" width='40px'><div class=\"dojoxGridSortNode\">已<br>回复</div></td>" +"</tr></table></td>" +"<td class=\"dojoxGridCell tdBgcolor\"  width='70px'><div class=\"dojoxGridSortNode\">要求<br>回文<br>时间</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" width='70px'><div class=\"dojoxGridSortNode\">实际<br>回文<br>时间</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\"   width='140px'><div class=\"dojoxGridSortNode\">实际回文编号</div></td>" +"<td class=\"dojoxGridCell tdBgcolor\" width='80px'><div class=\"dojoxGridSortNode\">编制人</div></td>" +"</tr>" ;

蓝色部分为复合表头部分。
最后的效果

不过这种样式在firefox上没有效果，所以如果要求在firefox上显示还需要在调试一下。当然如果遇到类似的问题也可以采取其他的方式，比如把表头做成一个div形式的（这样需要确定每一列的宽度）。根据自己的需要确定解决办法~~