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
    本文版权归作者和博客园共有,未经作者同意请保留此声明.
  • 相关阅读:
    luogu P4798 [CEOI2015 Day1]卡尔文球锦标赛 dp 数位dp
    7.12 NOI模拟赛 生成树 装压dp vector装压
    2020牛客暑假多校训练营 第二场 H Happy Triangle set 线段树 分类讨论
    2020牛客暑假多校训练营 第二场 G Greater and Greater bitset
    7.11 NOI模拟赛 qiqi20021026的T1 四个指针莫队 trie树
    2020牛客暑假多校训练营 第二场 E Exclusive OR FWT
    7.12 NOI模拟赛 探险队 期望 博弈 dp 最坏情况下最优策略 可并堆
    luogu P5892 [IOI2014]holiday 假期 决策单调性优化dp 主席树
    luogu P2252 威佐夫博弈 模板 博弈
    2020牛客暑期多校训练营 第二场 C Cover the Tree 构造 贪心
  • 原文地址:https://www.cnblogs.com/houfeng/p/1528732.html
Copyright © 2011-2022 走看看