• css固定表格表头(各浏览器通用)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title> 固定表格表头 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style type="text/css">
    div{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100px;
    margin-top: 5px;
    margin-left: 12px;
    padding-top: -2px;
    padding-bottom: 5px;
    border: 3px solid #009933;
    }
    table{
    100%;
    border-color: #d2f1ac;
    border-collapse: collapse;
    border-top: 0px solid #ffffff;
    }
    .fixedtd{
    position: relative;
    z-index: 1;
    background: #009933;
    text-align: center;
    }
    #text{position:fixed;background-color:#00ff00 ; 100%; }
    *+html #text {background-color:red;position:relative;top:expression(this.offsetParent.scrollTop);}
    </style>
    </head>
    <body>
    <div>
    <table border="1">
    <tr id="text">
    <td class="fixedtd">
    固定表头第一列
    </td>
    <td class="fixedtd">
    固定表头第二列
    </td>
    <td class="fixedtd">
    固定表头第三列
    </td>
    <td class="fixedtd">
    固定表头第四列
    </td>
    <td class="fixedtd">
    固定表头第五列
    </td>
    <td class="fixedtd">
    固定表头第六列
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tr>
    <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
    <td>A4</td>
    <td>A5</td>
    <td>A6</td>
    </tr>
    <tr>
    <td>B1</td>
    <td>B2</td>
    <td>B3</td>
    <td>B4</td>
    <td>B5</td>
    <td>B6</td>
    </tr>
    <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
    <td>C5</td>
    <td>C6</td>
    </tr>
    <tr>
    <td>D1</td>
    <td>D2</td>
    <td>D3</td>
    <td>D4</td>
    <td>D5</td>
    <td>D6</td>
    </tr>
    <tr>
    <td>E1</td>
    <td>E2</td>
    <td>E3</td>
    <td>E4</td>
    <td>E5</td>
    <td>E6</td>
    </tr>
    <tr>
    <td>F1</td>
    <td>F2</td>
    <td>F3</td>
    <td>F4</td>
    <td>F5</td>
    <td>F6</td>
    </tr>
    <tr>
    <td>G1</td>
    <td>G2</td>
    <td>G3</td>
    <td>G4</td>
    <td>G5</td>
    <td>G6</td>
    </tr>
    <tr>
    <td>H1</td>
    <td>H2</td>
    <td>H3</td>
    <td>H4</td>
    <td>H5</td>
    <td>H6</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

  • 相关阅读:
    迷茫 分类: 工作生活经历 20081221 00:46 139人阅读 评论(0) 收藏
    舍得 分类: 工作生活经历 20090614 12:52 142人阅读 评论(0) 收藏
    计算机体系结构 分类: 工作生活经历 20090614 13:01 143人阅读 评论(0) 收藏
    状态不佳 20090115 00:24 150人阅读 评论(0) 收藏
    数字电路 分类: 工作生活经历 20090210 23:18 178人阅读 评论(0) 收藏
    About
    最终还是用了wordpress 你好wordpress
    oa项目 发送提示消息接口
    php获取文件后缀函数
    世界,你好!
  • 原文地址:https://www.cnblogs.com/cczhoufeng/p/3727020.html
Copyright © 2020-2023  润新知