zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    OpenCV人脸检测
    和机器学习和计算机视觉相关的数学(转载)
    操作系统课程设计 消息缓冲队列通信
    操作系统课程设计 线程的同步与互斥
    嵌入式考试Shell编程题
    Bash基础知识
    开始学习Shell/bash 加减乘运算
    RT-Thread Mini2440串口驱动
    Mini2440裸机RTC时钟驱动转化为字符串显示
    Mini2440裸机液晶屏TD35驱动
  • 原文地址:https://www.cnblogs.com/tianguook/p/4342391.html
Copyright © 2011-2022 走看看