隨筆-77  評論-5  文章-2  trackbacks-0
           

           

          <html>

          <head>

          <!--固定行列頭,曲濱200608-->

          <style type="text/css">

          <!--

          body,table, td, a {

          font:9pt;

          }

           

          /*重點:固定行頭樣式*/

          .scrollRowThead

          {

               position: relative;

               left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);

               z-index:0;

          }

           

          /*重點:固定表頭樣式*/

          .scrollColThead {

               position: relative;

               top: expression(this.parentElement.parentElement.parentElement.scrollTop);

               z-index:2;

          }

           

          /*行列交叉的地方*/

          .scrollCR {

               z-index:3;

          }

           

          /*div外框*/

          .scrollDiv {

          height:200px;

          clear: both;

          border: 1px solid #EEEEEE;

          OVERFLOW: scroll;

          width: 100%;

          }

           

          /*行頭居中*/

          .scrollColThead td,.scrollColThead th

          {

               text-align: center ;

          }

           

           

          /*行頭列頭背景*/

          .scrollRowThead,.scrollColThead td,.scrollColThead th

          {

          background-color:EEEEEE;

          }

           

           

           

           

          /*表格的線*/

          .scrolltable

          {

          border-bottom:1px solid #CCCCCC;

          border-right:1px solid #CCCCCC;

          }

          /*單元格的線等*/

          .scrolltable td,.scrollTable th

          {

               border-left: 1px solid #CCCCCC;

               border-top: 1px solid #CCCCCC;

               padding: 5px;

          }

           

          -->

          </style>

          <script>

              

          </script>

          </head><body >

          本演示子兼容ie 瀏覽器,測試日期2006 ,其他瀏覽器在div onscroll 事件用js實現和本列相同的樣式應該也可實現

          <div id="scrollDiv" class="scrollDiv" >

          <table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable">

           

          <tr class="scrollColThead"  >

          <th class="scrollRowThead scrollCR"  >&nbsp;</th>

          <th colspan="2">列頭</th>

          <th colspan="10">列頭</th>

          </tr>

          <tr class="scrollColThead"  >

          <th class="scrollRowThead scrollCR"  >h1</th>

          <th >h2</th>

          <th >h3</th>

          <th >h4</th>

          <th >h5</th>

          <th >565656</th>

          <th >565656</th>

          <th >5656565656</th>

          <th >56565656</th>

          <th >56565656</th>

          <th >56565656</th>

          <th >56565656</th>

          <th >56566666666666666666666666666666666666666666666666666666666666666666565656</th>

          </tr>

          <tr>

          <td class="scrollRowThead"  ><input type="checkbox" name="checkbox" value="checkbox">

            a</td>

          <td>單元格2</td>

          <td>單元格3</td>

          <td>單元格4</td>

          <td>單元格5</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          </tr>

          <tr>

          <td class="scrollRowThead"  ><input type="checkbox" name="checkbox2" value="checkbox">

            b</td>

          <td>單元格2</td>

          <td>單元格3</td>

          <td>單元格4</td>

          <td>單元格5</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          <td>&nbsp;</td>

          </tr>

          </table>

          </div>

           

          </body></html>

           

           

           

           


          文章來源:http://stocknewbie.bokee.com/viewdiary.13339039.html
          posted on 2009-05-01 10:52 huohuo 閱讀(412) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 安新县| 松滋市| 天全县| 石景山区| 咸宁市| 万州区| 万安县| 武陟县| 政和县| 丁青县| 鄂托克前旗| 浙江省| 阿坝县| 泽库县| 平顶山市| 凯里市| 涪陵区| 柘城县| 株洲市| 邛崃市| 铜梁县| 靖安县| 巴林右旗| 寻乌县| 徐州市| 奇台县| 内丘县| 宝鸡市| 安阳县| 忻州市| 托克逊县| 虞城县| 历史| 通山县| 乐都县| 长垣县| 黑水县| 府谷县| 永修县| 赣州市| 临夏市|