搜索一下關于用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
posted on 2009-03-06 11:43
YODA 閱讀(2684)
評論(1) 編輯 收藏