表格锁定表头

在WEB应用程序开发中，经常遇见表头锁定问题，有时比较让人头疼，现总结一下：

1。使用style-expression实现。(横向表头)

将要锁定表头的表格包含在div中并且DIV是允许有滚动条的，然后设置需要锁定的行;

<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>

以上<tr>的样式部分为锁定的主要部分。
2、使用style-expression实现。(纵向表头)
仍然将需要锁定的表格包含在DIV中且DIV允许有滚动条，然后设置需要锁定的列；

<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>中的样式为锁定主要部分。