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>

  • 相关阅读:
    SOCKET 3次握手
    NativeXml帮助(四) http://gaoyanan.blog.sohu.com/162725319.html
    DELPHI下的SOCK编程(转)
    socket 编程入门教程(三)TCP原理:5、TCP的三次握手(threeway handshake)
    计算机术语的英文缩写
    提高查询速度方法总结
    复制表结构的通用存储过程
    QQ盗号工具代码(破解键盘锁)
    使用VB将SQL SERVER 的脚本导出
    2007第四周 关于逛街
  • 原文地址:https://www.cnblogs.com/xinlang/p/1340041.html
Copyright © 2011-2022 走看看