纯css3实现表格固定列效果

最新推荐文章于 2023-12-19 18:00:00 发布

yw00yw

最新推荐文章于 2023-12-19 18:00:00 发布

阅读量713

点赞数 1

分类专栏： css 文章标签： css3 sticky 表格固定列定位

本文链接：https://blog.csdn.net/yw00yw/article/details/108341721

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用css3的sticky属性

父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table_container {
            width: 100%;
            overflow: scroll;
        }

        table {
            width: 100%;
            width: 1800px;
        }

        table tr {
            background: lemonchiffon;
        }

        table th, td {
            text-align: center;
            background: lemonchiffon;
        }

        .fixed_column {
            position: sticky;
            left: 0;
            z-index: 9999;
        }

    </style>
</head>
<body>
    <div class="table_container">
        <table border="1">
            <thead>
                <tr>
                    <th class="fixed_column">标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                    <th>标题4</th>
                    <th>标题5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="fixed_column">1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>