CSS HTML 实现垂直滚动表格

CSS HTML 实现垂直滚动表格

搜索一下关于用CSS和HTML实现可滚动表格的资料，有一种方案实现了很好的效果，地址在：http://www.imaputz.com/cssStuff/bigFourVersion.html ，此方案用一个<table>，通过在<thead>和<tbody>部分使用不同的样式来实现垂直滚动的表格。经过研究这种方案的代码，它改变了<thead>和<tbody>的display属性，来实现滚动效果，使用方便。但是有一个问题就是，在IE和非IE的浏览器上，要对<tbody>设定不同的宽度（是否减去右侧滚动条的宽度），否则在IE中会出现横向滚动条。如果系统中所有的滚动表格的宽度都一样，或者限制用户使用的浏览器为某种确定的浏览器，就可以采用这种方案，否则，这种方案就不合适了。

第二种方案的实现方式是：滚动表格的头和滚动内容分别是不同的两个<table>，放在两个上下相邻的<div>里来模拟固定的头和可滚动的内容。这种方案便于理解，但是在使用的时候有一点麻烦的就是需要设定每个列的宽度以保证头上表格列和内容表格列的宽度一致，让竖线能够对齐。

两种方案都在以下浏览器通过测试：
? IE 6.0
? Google Chrome 2.0.166.1
? FireFox 3.0.6 火狐中国版
? Apple Safari 4 Beta
? Opera 9.64
? Nescape Navigator 9.0.0.6

 

演示页面下载链接：http://cid-4997e2433aa51713.skydrive.live.com/self.aspx/blogfiles/html|_scrollable|_table.rar

Technorati 标签: css, html, scrollable table