表格第一列粘性固定

<html>

<head>
    <meta charset="UTF-8">
    <title>粘性定位sticky固定表格列</title>
</head>
<style>
    .td1 {
        position: sticky;
        z-index: 1;
        left: 10px;
        background-color: #fff;
    }

    .td2 {
        position: sticky;
        z-index: 1;
        left: 82px;
        background-color: #fff;
    }
</style>

<body>

    <div id="tableDiv" style="width:500px;overflow-x:auto;">
        <table style="width:800px;">
            <tbody>
                <tr>
                    <td style="width:80px;" class="td1">序号</td>
                    <td style="width:80px;" class="td2">姓名</td>
                    <td style="width:100px;">语文</td>
                    <td style="width:100px;">数学</td>
                    <td style="width:100px;">英语</td>
                    <td style="width:100px;">化学</td>
                    <td style="width:100px;">生物</td>
                </tr>
                <tr>
                    <td class="td1">1</td>
                    <td class="td2">张三</td>
                    <td>98</td>
                    <td>87</td>
                    <td>66</td>
                    <td>87</td>
                </tr>
                <tr>
                    <td class="td1">2</td>
                    <td class="td2">里斯</td>
                    <td>98</td>
                    <td>87</td>
                    <td>66</td>
                    <td>87</td>
                    <td>87</td>
                </tr>
                <tr>
                    <td class="td1">3</td>
                    <td class="td2">王五</td>
                    <td>98</td>
                    <td>87</td>
                    <td>66</td>
                    <td>87</td>
                    <td>87</td>
                </tr>
                <tr>
                    <td class="td1">4</td>
                    <td class="td2">赵六</td>
                    <td>98</td>
                    <td>87</td>
                    <td>66</td>
                    <td>66</td>
                    <td>87</td>
                </tr>
                <tr>
                    <td class="td1">5</td>
                    <td class="td2">张三</td>
                    <td>98</td>
                    <td>87</td>
                    <td>87</td>
                    <td>66</td>
                    <td>87</td>
                </tr>
                <tr>
                    <td class="td1">6</td>
                    <td class="td2">小芳</td>
                    <td>98</td>
                    <td>87</td>
                    <td>87</td>
                    <td>66</td>
                    <td>87</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容