• Table 固定表头的几种方法

    <style type="text/css">
    /*所有内容都在这个DIV内*/
    div.all {
    border: 3px solid #FF00FF;
    80%; /*这个宽度可根据实际需要改变*/
    clear: right;
    }

    /*表头在这个DIV内*/
    div.title {
    100%;
    }
    /*内容在这个DIV内*/
    div.content {
    100%;
    overflow: scroll; /*总是显示滚动条*/
    overflow-x: hidden; /*去掉横向滚动条*/
    height: 100px;
    }
    div.title_left {
    float: left;
    margin-right: 17px;
    }
    div.content_left {
    float: left;
    }

    .main_table {
    100%;
    border: 1px solid #FF00FF;
    border-collapse: collapse; /*边线与旁边的合并*/
    table-layout:fixed;
    }
    .main_table tr th {
    border: 1px solid #FF00FF;
    overflow: hidden; /*超出长度的内容不显示*/
    /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
    word-break: break-all; /*字内断开*/
    text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
    white-space: nowrap;
    }
    /*单元格样式*/
    .main_table tr td {
    border: 1px solid #FF00FF;
    overflow: hidden;
    /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    </style>

    <div class="all">
    <div class="title">
    <div class="title_left">
    <table class="main_table">
    <tr>
    <th>aaa</th><th style="30%">aaasdddddddddfssssssssssssssssssssssssssssssssssssssssssssssss</th><th>ccc</th><th>bbb</th>
    </tr>
    </table>
    </div>
    </div>
    <div class="content">
    <div class="content_left">
    <table class="main_table">
    <tr>
    <td>aaa</td><td style="30%">aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>cfddddddddddddddddddddddddddddddddddddddddddddddddddc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    <tr>
    <td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
    </tr>
    </table>
    </div>
    </div>
    </div>

    -------------------------------------------------------------------

    <style>
    table
    {
    margin: 0;
    }
    td
    {
    border: 1px solid #bbb;
    background: #fff;
    }
    .fixedHeader td, #thead td
    {
    background: #f00;
    color: #fff;
    border: 1px solid #bbb;
    }
    #thead td
    {
    background: #f00;
    color: #fff;
    border: 1px solid #ffd800;
    }
    #div
    {
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    }
    #thead
    {
    position: fixed;
    z-index: 85;
    border-collapse: collapse;
    }
    </style>
    <script>
    $(function () {
    var browser_version = $.browser.version;

    $("#div").scroll(function (e) {
    if ($(this).scrollTop() > 0) {
    if ('6.0' == browser_version || '7.0' == browser_version) {

    $(".fixedHeader").find("td").css({ "position": "relative", "top": $("#div").scrollTop(), "z-index": "1" });
    }
    else if ($("#thead").length == 0) {
    var thead = $('<table id="thead" cellspacing="1" border="0" cellspacing="0">' + $("table thead").html() + '</table>');

    $("#div").prepend(thead);
    for (var i = 0; i < $("table thead").find("td").length; i++) {
    $("#thead").find("td").eq(i).css({ "position": "absolute", "left": $("table>thead").find("td").eq(i).offset().left - 1 + "px", "width": $("table>thead").find("td").eq(i).width() + "px" });

    }
    }

    }
    else {
    $("#thead").remove();
    }
    });
    });
    </script>


    <div id="div">
    <table border="0" cellspacing="1" width="100%" bgcolor="#fff">
    <thead class="fixedHeader">
    <tr>
    <td align="center" class="main_td">
    提现用户
    </td>
    <td align="center" class="main_td">
    姓名
    </td>
    <td align="center" class="main_td">
    提现银行
    </td>
    <td align="center" class="main_td">
    提现支行省市
    </td>
    <td align="center" class="main_td">
    提现账号
    </td>
    <td align="center" class="main_td">
    提现总额
    </td>
    <td align="center" class="main_td">
    到账金额
    </td>
    <td align="center" class="main_td">
    手续费
    </td>
    <td align="center" class="main_td">
    提现时间
    </td>
    <td align="center" class="main_td">
    状态
    </td>
    <td align="center" class="main_td">
    审核员
    </td>
    <td align="center" class="main_td">
    审核时间
    </td>
    <td align="center" class="main_td">
    审核备注
    </td>
    <td align="center" class="main_td">
    操作
    </td>
    </tr>
    </thead>
    <tbody class="scrollContent">
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    广东省深圳市
    </td>
    <td align="center">
    </td>
    <td align="right">
    6,000.00
    </td>
    <td align="right">
    5,997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/9/13 16:25:29
    </td>
    <td align="center">
    审核通过
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    2012/9/13 16:25:43
    </td>
    <td align="left">
    jj
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    广东省深圳市
    </td>
    <td align="center">
    </td>
    <td align="right">
    5,000.00
    </td>
    <td align="right">
    4,997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/9/13 15:52:13
    </td>
    <td align="center">
    审核通过
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    2012/9/13 16:24:06
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    广东省深圳市
    </td>
    <td align="center">
    </td>
    <td align="right">
    5,000.00
    </td>
    <td align="right">
    4,997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/9/13 15:51:06
    </td>
    <td align="center">
    审核通过
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    2012/9/13 15:54:05
    </td>
    <td align="left">
    fg2
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    广东省深圳市
    </td>
    <td align="center">
    </td>
    <td align="right">
    5,000.00
    </td>
    <td align="right">
    4,997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/9/13 15:50:30
    </td>
    <td align="center">
    审核通过
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    2012/9/13 15:52:51
    </td>
    <td align="left">
    fh
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    上海支行 中国银行
    </td>
    <td align="center">
    上海上海
    </td>
    <td align="center">
    </td>
    <td align="right">
    50,000.00
    </td>
    <td align="right">
    49,995.00
    </td>
    <td align="right">
    5.00
    </td>
    <td align="center">
    2012/9/13 15:48:16
    </td>
    <td align="center">
    审核失败
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    2012/9/13 15:49:46
    </td>
    <td align="left">
    bb
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    qq 中国工商银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="right">
    1,000.00
    </td>
    <td align="right">
    997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/8/27 13:10:19
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    上海支行 中国银行
    </td>
    <td align="center">
    上海上海
    </td>
    <td align="center">
    </td>
    <td align="right">
    1,000.00
    </td>
    <td align="right">
    997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/8/27 13:42:06
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    广东省深圳市
    </td>
    <td align="center">
    </td>
    <td align="right">
    50,000.00
    </td>
    <td align="right">
    49,995.00
    </td>
    <td align="right">
    5.00
    </td>
    <td align="center">
    2012/8/27 13:34:59
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    广东省深圳市
    </td>
    <td align="center">
    </td>
    <td align="right">
    1,000.00
    </td>
    <td align="right">
    997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/8/27 13:32:38
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    qq 中国工商银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="right">
    1,000.00
    </td>
    <td align="right">
    997.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/8/27 13:10:19
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=23">lend04</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    曾思
    </td>
    <td align="center">
    QQ 中国工商银行
    </td>
    <td align="center">
    广东省深圳市
    </td>
    <td align="center">
    </td>
    <td align="right">
    200.00
    </td>
    <td align="right">
    197.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/8/27 13:09:42
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    曾思远
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    cxxgfdgfdghdgfcf1
    </td>
    <td align="right">
    8,519.86
    </td>
    <td align="right">
    8,516.86
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/5/16 16:22:07
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    曾思远
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    cxxgfdgfdghdgfcf1
    </td>
    <td align="right">
    8,519.87
    </td>
    <td align="right">
    8,516.87
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/5/16 16:21:33
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=5">suenping</a> <span
    style="color: #bbb">(正常)</span>
    </td>
    <td align="center">
    苏恩平
    </td>
    <td align="center">
    红领支行 平安银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="right">
    6,967.52
    </td>
    <td align="right">
    6,964.52
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/5/16 16:00:49
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    cyril
    </td>
    <td align="center">
    qq 中国工商银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="right">
    46,863.41
    </td>
    <td align="right">
    46,858.41
    </td>
    <td align="right">
    5.00
    </td>
    <td align="center">
    2012/5/16 15:59:01
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=5">suenping</a> <span
    style="color: #bbb">(正常)</span>
    </td>
    <td align="center">
    苏恩平
    </td>
    <td align="center">
    红领支行 平安银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="right">
    967.52
    </td>
    <td align="right">
    964.52
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/5/16 16:00:14
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr class="tr2">
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    曾思远
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    cxxgfdgfdghdgfcf1
    </td>
    <td align="right">
    8,519.80
    </td>
    <td align="right">
    8,516.80
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/5/16 15:53:08
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    <tr>
    <td align="center">
    <a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
    (正常)</span>
    </td>
    <td align="center">
    曾思远
    </td>
    <td align="center">
    红宝支行 平安银行
    </td>
    <td align="center">
    </td>
    <td align="center">
    cxxgfdgfdghdgfcf1
    </td>
    <td align="right">
    8,519.00
    </td>
    <td align="right">
    8,516.00
    </td>
    <td align="right">
    3.00
    </td>
    <td align="center">
    2012/5/16 15:52:43
    </td>
    <td align="center">
    用户撤回
    </td>
    <td align="center">
    </td>
    <td align="center">
    </td>
    <td align="left">
    </td>
    <td align="center">
    -
    </td>
    </tr>
    </tbody>
    </table>
    </div>
  • 相关阅读:
    Django框架 之 logging配置
    Django框架 之 中间件
    Django框架 之 form组件
    Django框架 之 Ajax
    Django框架 之 Pagination分页实现
    3张图带你看懂扩展KMP(EXKMP)
    [TJOI2018]游园会(状压dp+LCS)
    [BZOJ 2959] 长跑(LCT+并查集)
    [NAIPC2016]Jewel Thief(决策单调性+分治)
    [BZOJ 1563] [NOI 2009] 诗人小G(决策单调性)
  • 原文地址：https://www.cnblogs.com/yangpeng-jingjing/p/6178482.html
Copyright © 2020-2023  润新知