• 固定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>

  • 相关阅读:
    VB.NET 操作Json 包括嵌套的
    c#和VB混用出现的错误
    System.ArgumentException: 另一个SqlParameterCollection中已包含SqlParameter。
    centos vsftpd 安装配置
    linux centos apache+php+mysql 安装( 用包安装 非yum 安装)
    迟到的一笔 php 5 apache 2.2 webservice 创建与配置
    linux centos apache+php+mysql 安装
    php 不能连接数据库 php error Can't connect to local MySQL server through socket '/tmp/mysql.sock'
    内置过渡动画
    Input 输入框
  • 原文地址:https://www.cnblogs.com/xinlang/p/1340041.html
Copyright © 2020-2023  润新知