• table中的标题行冻结的简单实现


    这里只是简单的实现,主要是用了position属性的fixed属性值,这个属性值需要高版本浏览器的支持,如果要兼容低版本的浏览器可以通过写脚本的方式实现,也可以使用UI库,有些UI库里面表格插件的标题行都是冻结的。这里只介绍使用fixed的方法:

    <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body>
        <div class="freezediv" style=" 400px; height: 140px; overflow: auto;border:1px solid gray">
            <table id="freezedivTable" cellpadding="0" cellspacing="0">
                <tr id="fixTr" style="position: fixed; background-color:Yellow;">
                    <td style=" 60px">
                        序号
                    </td>
                    <td style=" 60px">
                        内容
                    </td>
                </tr>
                <tr>
                    <td>
                        序号
                    </td>
                    <td>
                        内容
                    </td>
                </tr>
                <tr>
                    <td style=" 60px">
                        1
                    </td>
                    <td style=" 60px">
                        内容1
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        内容2
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        内容3
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        内容4
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>
                        内容5
                    </td>
                </tr>
                <tr>
                    <td>
                        6
                    </td>
                    <td>
                        内容6
                    </td>
                </tr>
                <tr>
                    <td>
                        7
                    </td>
                    <td>
                        内容7
                    </td>
                </tr>
                <tr>
                    <td>
                        8
                    </td>
                    <td>
                        内容8
                    </td>
                </tr>
                <tr>
                    <td>
                        9
                    </td>
                    <td>
                        内容9
                    </td>
                </tr>
                <tr>
                    <td>
                        10
                    </td>
                    <td>
                        内容10
                    </td>
                </tr>
                <tr>
                    <td>
                        11
                    </td>
                    <td>
                        内容11
                    </td>
                </tr>
                <tr>
                    <td>
                        12
                    </td>
                    <td>
                        内容12
                    </td>
                </tr>
                <tr>
                    <td>
                        13
                    </td>
                    <td>
                        内容13
                    </td>
                </tr>
                <tr>
                    <td>
                        14
                    </td>
                    <td>
                        内容14
                    </td>
                </tr>
                <tr>
                    <td>
                        15
                    </td>
                    <td>
                        内容15
                    </td>
                </tr>
                <tr>
                    <td>
                        16
                    </td>
                    <td>
                        内容16
                    </td>
                </tr>
                <tr>
                    <td>
                        17
                    </td>
                    <td>
                        内容17
                    </td>
                </tr>
                <tr>
                    <td>
                        18
                    </td>
                    <td>
                        内容18
                    </td>
                </tr>
                <tr>
                    <td>
                        19
                    </td>
                    <td>
                        内容19
                    </td>
                </tr>
                <tr>
                    <td>
                        20
                    </td>
                    <td>
                        内容20
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>
  • 相关阅读:
    10 个雷人的注释,就怕你不敢用!
    Java 14 之模式匹配,非常赞的一个新特性!
    poj 3661 Running(区间dp)
    LightOJ
    hdu 5540 Secrete Master Plan(水)
    hdu 5584 LCM Walk(数学推导公式,规律)
    hdu 5583 Kingdom of Black and White(模拟,技巧)
    hdu 5578 Friendship of Frog(multiset的应用)
    hdu 5586 Sum(dp+技巧)
    hdu 5585 Numbers
  • 原文地址:https://www.cnblogs.com/tianguook/p/4342391.html
Copyright © 2020-2023  润新知