搜索一下關(guān)于用CSS和HTML實現(xiàn)可滾動表格的資料，有一種方案實現(xiàn)了很好的效果，地址在：http://www.imaputz.com/cssStuff/bigFourVersion.html ，此方案用一個<table>，通過在<thead>和<tbody>部分使用不同的樣式來實現(xiàn)垂直滾動的表格。經(jīng)過研究這種方案的代碼，它改變了<thead>和<tbody>的display屬性，來實現(xiàn)滾動效果，使用方便。但是有一個問題就是，在IE和非IE的瀏覽器上，要對<tbody>設(shè)定不同的寬度（是否減去右側(cè)滾動條的寬度），否則在IE中會出現(xiàn)橫向滾動條。如果系統(tǒng)中所有的滾動表格的寬度都一樣，或者限制用戶使用的瀏覽器為某種確定的瀏覽器，就可以采用這種方案，否則，這種方案就不合適了。
第二種方案的實現(xiàn)方式是：滾動表格的頭和滾動內(nèi)容分別是不同的兩個<table>，放在兩個上下相鄰的<div>里來模擬固定的頭和可滾動的內(nèi)容。這種方案便于理解，但是在使用的時候有一點麻煩的就是需要設(shè)定每個列的寬度以保證頭上表格列和內(nèi)容表格列的寬度一致，讓豎線能夠?qū)R。
兩種方案都在以下瀏覽器通過測試：
? 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 標(biāo)簽:
css,
html,
scrollable tableposted on 2009-03-06 11:43
YODA 閱讀(2675)
評論(1) 編輯 收藏