Table实现表头固定

实现思路:

1、  定义一层div,设置div的高度和宽度。

2、  定义一个table,用来显示表头。显示指出tbody,通过col属性设置列宽(用于与下文tabel对应列数据)。

3、  定义一个div,这个div可以进行高度设置。

4、  div中定义一个table,这个table带有滚动条,当数据超过了div的高度时,就可以滚动该table显示数据。

5、  显示定义tbody,绑定数据

 

定义两个div的原因:

1、  第一个div用来包围两个table。在这个div中再设置一个div,相当于是将第一个table给固定了

2、  使用第二个div的原因非常重要。表格的滑动主要是通过div来控制。因为div可以固定高度,在div中的表格通过滚动条来实现数据的滚动(如果直接使用table,因为tableheight属性是很诡秘的,在某些情况下会失效,所以可能会达不到预期的效果)。

3、  在进行宽度设置时,一定要仔细考虑滚动条的宽度、border的像素,这些值的设置直接会影响表头和数据的对齐问题

 

 

详细用例请查看:http://www.fengfly.com/plus/view-171096-1.html

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值