在WEB应用程序开发中,经常遇见表头锁定问题,有时比较让人头疼,现总结一下:
1。使用style-expression实现。(横向表头)
将要锁定表头的表格包含在div中并且DIV是允许有滚动条的,然后设置需要锁定的行;
[code]<div onselectstart="return false" style="border-color: Blue; border-width: 2px; border-style: solid;
height: 100%; width: 700px; overflow: auto cursor: default;">
<table>
<tr style="position: relative; top: expression(this.offsetParent.scrollTop);">
<td>...</td>
</tr>
</table>
</div>[/code]
以上<tr>的样式部分为锁定的主要部分。
2、使用style-expression实现。(纵向表头)
仍然将需要锁定的表格包含在DIV中且DIV允许有滚动条,然后设置需要锁定的列;
[code]
<div onselectstart="return false" style="border-color: Blue; border-width: 2px; border-style: solid;
height: 100%; width: 700px; overflow: auto; cursor: default;">
<table>
<tr>
<td style="position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);">张三</td>
<td>....</td>
</tr>
<tr>
<td style="position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);">李四</td>
<td>....</td>
</tr>
<tr>
<td style="position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);">王五</td>
<td>....</td>
</tr>
</table>
</div>
以上<td>中的样式为锁定主要部分。[/code]
1。使用style-expression实现。(横向表头)
将要锁定表头的表格包含在div中并且DIV是允许有滚动条的,然后设置需要锁定的行;
[code]<div onselectstart="return false" style="border-color: Blue; border-width: 2px; border-style: solid;
height: 100%; width: 700px; overflow: auto cursor: default;">
<table>
<tr style="position: relative; top: expression(this.offsetParent.scrollTop);">
<td>...</td>
</tr>
</table>
</div>[/code]
以上<tr>的样式部分为锁定的主要部分。
2、使用style-expression实现。(纵向表头)
仍然将需要锁定的表格包含在DIV中且DIV允许有滚动条,然后设置需要锁定的列;
[code]
<div onselectstart="return false" style="border-color: Blue; border-width: 2px; border-style: solid;
height: 100%; width: 700px; overflow: auto; cursor: default;">
<table>
<tr>
<td style="position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);">张三</td>
<td>....</td>
</tr>
<tr>
<td style="position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);">李四</td>
<td>....</td>
</tr>
<tr>
<td style="position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);">王五</td>
<td>....</td>
</tr>
</table>
</div>
以上<td>中的样式为锁定主要部分。[/code]