1. 程式人生 > >表頭固定的前提下表格添加縱向滾動條

表頭固定的前提下表格添加縱向滾動條

表格 動態 overflow borde col float 技術 上下 height

  有時候在不分頁且數據多的時候就需要滾動條,或者說是下拉加載的時候也需要滾動條,但是希望在滾動的時候數據的表頭固定便於理解表體。

如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                width
: 100%; text-align: left; border:1px solid #000; } td,th{ border:1px solid #000; } tbody{ display: block; overflow-x: hidden; overflow-y: auto
; height: 100px; } thead,tbody tr{ display: table; width: 100%; table-layout: fixed; word-break: break-all; } table thead{ width: calc(100% - 17px); }
</style> </head> <body> <div style="height: 250px;"></div> <div style="height: 250px;"></div> <table cellspacing="0" cellpadding="0"> <thead> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> <th>表頭5</th> </thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> </body> </html>

結果:

技術分享圖片

有時候需要根據屏幕可用高度來動態設置表格的高度和表頭的寬度:(也就是可用寬度不足以顯示內容的時候將tbody定高,並且將thead的寬度減去滾動條的寬度使得上下對齊)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
                text-align: left;
                border: 1px solid #000;
            }
            
            td,
            th {
                border: 1px solid #000;
            }
            
            tbody {
                display: block;
                overflow-x: hidden;
                overflow-y: auto;
            }
            
            thead,
            tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
                word-break: break-all;
            }
        </style>
        <script src="../js/jquery-1.8.3.min.js"></script>
    </head>

    <body>
        <div style="height: 250px;"></div>
        <div style="height: 250px;"></div>

        <div id="tebleDiv">
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <th>表頭1</th>
                    <th>表頭2</th>
                    <th>表頭3</th>
                    <th>表頭4</th>
                    <th>表頭5</th>
                </thead>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
            </table>
        </div>

    </body>

</html>
<script>
    $(function() {
        var windowHeight = $(window).height(); //窗口可用高度
        var topValue = $("#tebleDiv").offset().top;
        var tebleDivHeight = $("#tebleDiv").height();
        if (parseFloat(topValue) + parseFloat(tebleDivHeight) + 180 < parseFloat(windowHeight)) {
            return;
        }
        
        var realHeight = windowHeight - topValue -50;
        $("table tbody").css("height", realHeight + "px");
        $("table thead").css("width", ($("table thead").width() - 18) + "px");
    });
</script>

結果:

技術分享圖片

表頭固定的前提下表格添加縱向滾動條