原生css实现table锁行锁列

xuchzhi

于 2023-02-17 14:52:16 发布

阅读量288

点赞数

文章标签： html5 css3 Powered by 金山文档

本文链接：https://blog.csdn.net/xuchzhi/article/details/129086524

版权

因为在移动端要展现表格数据量比较多，数据滚动的时候能实现锁列锁行。没找到很合适的控件，用css实现了个简单的表格，关键属性是 position:sticky，代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            overflow: auto;
            height: 50vh;
            width: 100%;
            border:1px solid red;
            border-bottom: 0;
            border-right: 0;
        }
        .wrapper>table {
            width: 100%;
            table-layout: fixed;
            border-collapse:collapse;
        }
        
        .wrapper>table th,td {
            width: 80px;
            height: 40px;
            /* border-top :1px solid #ccc; */
            /* border-left :1px solid #ccc; */
            border-right :1px solid #ccc;
            border-bottom :1px solid #ccc;
            box-sizing: border-box;
        }
        .wrapper>table>thead th{
            position: sticky;
            top:0;/*标题在上*/
            background-color: pink;
        }
        .wrapper>table td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行在左 */
            background-color: lightblue;
        }
        .wrapper>table  th:first-child { 
            z-index:2;/*控制始终位于顶层*/
        }
        
    </style>
</head>
<body>
    <div id="app">
        <div class="wrapper">
            <table>
                <thead>
                    <tr>
                        <th v-for="item in 10">标题</th>
                    </tr>

                </thead>
                <tbody>
                    <tr v-for="item in 20">
                        <td v-for="column in 10">{{column===1?'锁定列':column}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>
</body>

</html>