表格很长,这个时候就希望表格头部不动,而只是表格内容行支持滚动功能。

2. 方法

  • 两张表:一张表(THeader)负责头部字段的显示,另一张表(TBody)负责内容行字段的显示。
  • 两张表都存放在一个div中
  • THeader、TBody分别存放在一个div中
  • 整个div不支持滚动条:overflow: hidden
  • 包住TBody的div支持滚动条:overflow-y: scroll
  • THeader的显示字段比Tbody多一个:用来存放滚动条的位置,宽度设置为17px
  • TBody的高度需要通过JavaScript来计算,可以使用onresize事件动态触发高度的变化

3. 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 4px;
    }

    th, td {
        text-align: center;
        border: 1px solid green;
    }
    
    th {
        background-color: rgba(167, 167, 167, 0.5);
        font-size: 15px;
    }
    
    td {
        font-size: 14px;
    }
    
    tr:nth-child(even) {
        background-color: #e8f5ed;
    }
    
    .table-col-1 { width: 30px; }
    .table-col-2 { width: 60px; }
    .table-col-3 { width: 80px; }
    .table-col-4 { width: 22px; }
    /* .table-col-5 { width: 30px; } 这列作为动态宽度值 */
    .table-col-6 { width: 140px; }
    .table-col-7 { width: 220px; }
    .table-col-8 { width: 180px; }
    .table-col-9 { width: 16px; }
    
    #idTableBody {
        width: 100%;
        overflow-y: scroll; 
        height: 120px; /* 如果需要动态的表格内容高度,可以将高度属性的设置转移到onresize事件中实现 */
    } 
</style>
</head>
<body>
    <div class="table-details">
        <div id="idTableHeader">
            <table>
                <colgroup>
                    <col class="table-col-1">
                    <col class="table-col-2">
                    <col class="table-col-3">
                    <col class="table-col-4">
                    <col class="table-col-5">
                    <col class="table-col-6">
                    <col class="table-col-7">
                    <col class="table-col-8">
                    <col class="table-col-9">
                </colgroup>
                <tr>
                    <th>1</th>
                    <th>1</th>
                    <th>1</th>
                    <th>1</th>
                    <th>1</th>
                    <th>1</th>
                    <th>1</th>
                    <th>1</th>
                    <th></th>
                </tr>
            </table>
        </div>
        <div id="idTableBody">
            <table>
                <colgroup>
                    <col class="table-col-1">
                    <col class="table-col-2">
                    <col class="table-col-3">
                    <col class="table-col-4">
                    <col class="table-col-5">
                    <col class="table-col-6">
                    <col class="table-col-7">
                    <col class="table-col-8">
                </colgroup>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
        </div>
    </div>
</body>
</html>

效果:

[TimLinux] django html如何实现固定表头

onresize事件:

function setTBodyHeight() {
    var t = document.getElementById('idTableBody');
    var innerHeight = window.innerHeight;
    t.style.height = (innerHeight - 200) + "px"; // 减去200是去掉一个固定高度
}

window.onload = function () {
    // 监听事件
    window.onresize = setTBodyHeight;

    // 首次加载,由代码触发一次resize事件。
    var ev = document.createEvent("Events");
    ev.initEvent('resize', false, true);
    window.dispatchEvent(ev);
};