CSS3实现表格的锁定行与锁定列

wgq837051
于 2025-02-08 15:33:25 发布
阅读量154
点赞数 1
文章标签： css3 前端 css
本文链接：https://blog.youkuaiyun.com/wgq837051/article/details/145517029
版权
通过CSS3的 position: sticky 实现

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 容器样式：固定宽高 + 允许滚动 */
        .table-container {
            max-width: 600px;
            max-height: 400px;
            overflow: auto;
            margin: 20px;
            border: 1px solid #ddd;
        }

        /* 表格样式：固定布局 + 边框 */
        table {
            border-collapse: collapse;
            table-layout: fixed;
            width: 100%;
        }



        /* 表头固定 */
        thead th {
            position: sticky;
            top: 0;
            /* 固定在顶部 */
            z-index: 2;
            /* 确保表头在上层 */
            background: #fff;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);

            &::before {
                position: absolute;
                right: 0;
                top: -1px;
                z-index: 6;
                height: 1px;
                width: 100%;
                transition: box-shadow .3s;
                content: "";
                pointer-events: none;
                border: 1px solid white;
            }

            &::after {
                position: absolute;
                right: 0;
                bottom: -1px;
                z-index: 6;
                height: 1px;
                width: 100%;
                transition: box-shadow .3s;
                content: "";
                pointer-events: none;
                border-bottom: 1px solid #ddd;
            }
        }

        /* thead th:first-child {
            &::before {
                position: absolute;
                left: -2px;
                top: -1px;
                z-index: 6;
                height: 100%;
                width: 1px;
                transition: box-shadow .3s;
                content: "";
                pointer-events: none;
                border-right: 1px solid #ddd;
            }

            &::after {
                position: absolute;
                right: -1px;
                bottom: 0px;
                z-index: 6;
                height: 100%;
                width: 1px;
                transition: box-shadow .3s;
                content: "";
                pointer-events: none;
                border-right: 1px solid #ddd;
            }

        } */

        /* 首列固定 */
        tbody td:first-child {
            position: sticky;
            left: 0;
            /* 固定在左侧 */
            z-index: 1;
            /* 层级低于表头 */
            background: #fff;
            box-shadow: 2px 0 2px -1px rgba(0, 0, 0, 0.1);

            &::before {
                position: absolute;
                left: -2px;
                top: -1px;
                z-index: 6;
                height: 100%;
                width: 1px;
                transition: box-shadow .3s;
                content: "";
                pointer-events: none;
                border-right: 1px solid #ddd;
            }

            &::after {
                position: absolute;
                right: -1px;
                bottom: 0px;
                z-index: 6;
                height: 100%;
                width: 1px;
                transition: box-shadow .3s;
                content: "";
                pointer-events: none;
                border-right: 1px solid #ddd;
            }

        }

        /* 左上角表头单元格：同时固定 */
        thead th:first-child {
            left: 0;
            z-index: 3;
            /* 最高层级 */

        }

        /* 单元格基础样式 */
        th,
        td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
            min-width: 120px;
        }

        th {
            background: #f8f9fa;
        }
    </style>
</head>

<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th class="myTh" style="width: 180px">Header 1</th>
                    <th class="myTh" style="width: 180px">Header 2</th>
                    <th class="myTh" style="width: 180px">Header 3</th>
                    <th class="myTh" style="width: 180px">Header 4</th>
                </tr>
            </thead>
            <tbody>
                <!-- 示例数据 -->
                <tr>
                    <td>Row 1</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 2</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
               
                <!-- 更多行... -->
            </tbody>
        </table>
    </div>
</body>

</html>