zoukankan      html  css  js  c++  java
  • 固定table 的标题行

    <html>

    <head>

    <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;

    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 >

    <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>

    <tr>

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

      1</td>

    <td nowrap>单元格2</td>

    <td nowrap>单元格3</td>

    <td nowrap>单元格4</td>

    <td nowrap>单元格5</td>

    <td nowrap>&nbsp;</td>

    <td nowrap>&nbsp;</td>

    <td nowrap>&nbsp;</td>

    <td nowrap>&nbsp;</td>

    <td nowrap>&nbsp;</td>

    <td nowrap>&nbsp;</td>

    <td nowrap>&nbsp;</td>

    <td nowrap>&nbsp;</td>

    </tr>

    <tr>

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

      2</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="checkbox5" value="checkbox">

      3</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="checkbox6" value="checkbox">

      4</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="checkbox7" value="checkbox">

      5</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>

  • 相关阅读:
    StringBuffer和StringBuilder
    深入理解String类(重点)
    Java8新特性之:接口的默认方法和静态方法
    浅谈java接口
    浅谈java抽象
    java三大特性——多态
    #小练习 SGMLParser练习 分类: HTMLParser 2013-11-12 15:50 456人阅读 评论(0) 收藏
    SGMLParser 分类: HTMLParser 2013-11-12 15:25 1066人阅读 评论(1) 收藏
    #小练习 解析HTML文件并使用字典保存链接 分类: HTMLParser python 小练习 2013-11-11 12:06 267人阅读 评论(0) 收藏
    #小练习 使用HTMLParser获取data时注意事项 分类: python 小练习 HTMLParser 2013-11-08 21:05 335人阅读 评论(0) 收藏
  • 原文地址:https://www.cnblogs.com/xinlang/p/1340041.html
Copyright © 2011-2022 走看看