表格表头position: sticky失效求助（动态生成表格场景）

一、修复Sticky表头移出屏幕问题 #

你的表头设置position: sticky后失效，核心原因是缺少偏移定位值，浏览器无法确定表头要固定的位置。另外需要添加背景色避免被下方内容遮挡，修改后的CSS如下：

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px; /* 增加内边距提升可读性 */
}
th {
    position: sticky;
    top: 0; /* 关键：设置表头固定在顶部 */
    background-color: #fff; /* 添加背景色防止内容穿透 */
}

二、动态生成表格（适配服务器返回的未知数据） #

针对服务器返回的未知行数数据，使用for (var key in data[0])循环自动生成表头，遍历数据数组生成表格行，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单选择</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            position: sticky;
            top: 0;
            background-color: #fff;
        }
    </style>
</head>
<body>
<section id="dataDisplay"></section>
 
<script>
    // 模拟服务器返回的数据
    const data = [
        {H1: "RA1", H2: "RB1"},
        {H1: "RA2", H2: "RB2"},
        {H1: "RA3", H2: "RB3"},
        // 可扩展更多数据
    ];

    function disp() {
        if (!data.length) return;
        
        let html = '<table>';
        html += '<thead><tr>';
        // 动态生成表头
        for (var key in data[0]) {
            html += `<th>${key}</th>`;
        }
        html += '</tr></thead><tbody>';
        
        // 动态生成表格行
        data.forEach(item => {
            html += '<tr>';
            for (var key in item) {
                html += `<td>${item[key]}</td>`;
            }
            html += '</tr>';
        });
        
        html += '</tbody></table>';
        document.getElementById('dataDisplay').innerHTML = html;
    }
    disp();
</script>
</body>
</html>

额外说明 #

如果表格需要在固定高度的容器内滚动，需给容器设置height和overflow-y: auto，此时表头的sticky会相对于该容器生效：

#dataDisplay {
    height: 400px;
    overflow-y: auto;
}

内容的提问来源于stack exchange，提问作者YellowLarry