隨筆 - 42  文章 - 71  trackbacks - 0
          <2009年3月>
          22232425262728
          1234567
          891011121314
          15161718192021
          22232425262728
          2930311234

          常用鏈接

          留言簿

          隨筆檔案

          文章分類(lèi)

          文章檔案

          搜索

          •  

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          搜索一下關(guān)于用CSS和HTML實(shí)現(xiàn)可滾動(dòng)表格的資料,有一種方案實(shí)現(xiàn)了很好的效果,地址在:http://www.imaputz.com/cssStuff/bigFourVersion.html ,此方案用一個(gè)<table>,通過(guò)在<thead>和<tbody>部分使用不同的樣式來(lái)實(shí)現(xiàn)垂直滾動(dòng)的表格。經(jīng)過(guò)研究這種方案的代碼,它改變了<thead>和<tbody>的display屬性,來(lái)實(shí)現(xiàn)滾動(dòng)效果,使用方便。但是有一個(gè)問(wèn)題就是,在IE和非IE的瀏覽器上,要對(duì)<tbody>設(shè)定不同的寬度(是否減去右側(cè)滾動(dòng)條的寬度),否則在IE中會(huì)出現(xiàn)橫向滾動(dòng)條。如果系統(tǒng)中所有的滾動(dòng)表格的寬度都一樣,或者限制用戶(hù)使用的瀏覽器為某種確定的瀏覽器,就可以采用這種方案,否則,這種方案就不合適了。

          第二種方案的實(shí)現(xiàn)方式是:滾動(dòng)表格的頭和滾動(dòng)內(nèi)容分別是不同的兩個(gè)<table>,放在兩個(gè)上下相鄰的<div>里來(lái)模擬固定的頭和可滾動(dòng)的內(nèi)容。這種方案便于理解,但是在使用的時(shí)候有一點(diǎn)麻煩的就是需要設(shè)定每個(gè)列的寬度以保證頭上表格列和內(nèi)容表格列的寬度一致,讓豎線能夠?qū)R。

          兩種方案都在以下瀏覽器通過(guò)測(cè)試:
          ? IE 6.0
          ? Google Chrome 2.0.166.1
          ? FireFox 3.0.6 火狐中國(guó)版
          ? Apple Safari 4 Beta
          ? Opera 9.64
          ? Nescape Navigator 9.0.0.6

           

          演示頁(yè)面下載鏈接:http://cid-4997e2433aa51713.skydrive.live.com/self.aspx/blogfiles/html|_scrollable|_table.rar

          Technorati 標(biāo)簽: ,,
          posted on 2009-03-06 11:43 YODA 閱讀(2681) 評(píng)論(1)  編輯  收藏

          FeedBack:
          # re: CSS HTML 實(shí)現(xiàn)垂直滾動(dòng)表格 2009-03-15 16:22 123
          不支持ie7  回復(fù)  更多評(píng)論
            

          只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 石门县| 叙永县| 灵川县| 木里| 西乡县| 昭觉县| 保定市| 万年县| 微博| 海盐县| 柳江县| 白河县| 新闻| 兴隆县| 大城县| 平塘县| 雷州市| 青川县| 安徽省| 隆德县| 汕尾市| 临桂县| 五寨县| 湖南省| 宁海县| 开远市| 周口市| 霍城县| 阳谷县| 鸡泽县| 汝城县| 巍山| 乌拉特中旗| 台北县| 杨浦区| 安阳县| 理塘县| 钦州市| 宣威市| 天等县| 沂南县|