table中的標題行凍結的簡單實現


這里只是簡單的實現,主要是用了position屬性的fixed屬性值,這個屬性值需要高版本瀏覽器的支持,如果要兼容低版本的瀏覽器可以通過寫腳本的方式實現,也可以使用UI庫,有些UI庫里面表格插件的標題行都是凍結的。這里只介紹使用fixed的方法:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <div class="freezediv" style="width: 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="width: 60px">
                    序號
                </td>
                <td style="width: 60px">
                    內容
                </td>
            </tr>
            <tr>
                <td>
                    序號
                </td>
                <td>
                    內容
                </td>
            </tr>
            <tr>
                <td style="width: 60px">
                    1
                </td>
                <td style="width: 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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM