zoukankan      html  css  js  c++  java
  • 固定表头简单实现

    <style>
    Table
    {
     border:none;
     100%;
     border-collapse:collapse;
    }

    Td
    {
     border:solid 1px #ccc;
     background-color:White ;
     padding:4px;
     font-size:13px;
    }
    Th
    {
     border:solid 1px #ccc;
     background-color:gray ;
     padding:4px;
     font-size:13px;
            Auto;
     
    }
    </style>

    <div style="height: 150px; overflow: auto;">
    <table border=0>
        <tr  style="background-color:gray;border-bottom:solid 1px blue;position:relative;top:expression(this.offsetParent.scrollTop);">
             <th>
                head
            </th>
     <th>1</th>
        </tr>   
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    </table>
    </div>

    firefox:
    <div style="height: 150px; overflow: auto;">
    <table border=1>
        <tr  style="position:fixed;background-color:gray;">
            <th>
                head
            </th>
     <th>1</th>
        </tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>   
     <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    </table>
    </div>

    作者:houfeng
    出处:http://houfeng.cnblogs.com
    本文版权归作者和博客园共有,未经作者同意请保留此声明.
  • 相关阅读:
    Python自动补全
    Ubuntu的Mysql指南
    Kubernetes deployed on multiple ubuntu nodes
    【iOS】更新 CocoaPods 后 Podfile 报错
    【iOS】Xcode 使用 CocoaPods 导入第三方库后没有提示
    【iOS】build diff: /../Podfile.lock: No such file or directory
    【iOS】Interface Builder 预览
    【iOS】this class is not key value coding-compliant for the key ...
    【iOS】XIB 调整视图大小
    【iOS】[[NSBundle mainBundle] loadNibNamed:nibTitle owner:self options:nil] 异常
  • 原文地址:https://www.cnblogs.com/houfeng/p/1528732.html
Copyright © 2011-2022 走看看