表格固定列的问题
我是采用下面方法来固定显示表格的某列
把Table放在Div中,然后设置Div的onscroll事件。
这样做可以固定某列,但是如果数据比较多,移动滚动条的时候,固定列需要重新计算位置,闪动比较厉害,有好的办法去掉闪动吗?
代码如下。
<script>
function SyDG_doscroll(div)
{
table=div.getElementsByTagName('TABLE')[0];
for(i=table.rows.length-1;i>=0;i--)
{
table.rows[i].cells[0].style.position='relative';
table.rows[i].cells[0].style.left=div.scrollLeft-1 ;
}
}
</script>
<div id="dataDiv" style=" OVERFLOW-Y: scroll; OVERFLOW-X: auto; BORDER-LEFT: #339933 1px solid; WIDTH:330px; HEIGHT: 300px" onscroll="SyDG_doscroll(this);">
<table cellspacing="0" cellpadding="2" rules="all" borderColorDark="#ffffff" borderColorLight="#888888" border="1" id="DataGrid1" style="FONT-SIZE:12px;WIDTH:990px;BORDER-COLLAPSE:separate">
<tr>
<td style="background-color:Linen;">2</td>
<td>11010311211001111</td>
<td>aaa</td>
<td>110103</td>
<td>00</td>
<td>111</td>
<td>1</td>
<td>11010311211001111</td>
<td>11010311211001111</td>
</tr>
<tr>
<td style="background-color:Linen;">3</td>
<td>11010311211001111</td>
<td>aaa</td>
<td>110103</td>
<td>00</td>
<td>111</td>
<td>1</td>
<td>11010311211001111</td>
<td>11010311211001111</td>
</tr>
</table>
</div>