表格锁定表头

在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]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值