纯 CSS 的固定表头和首列

将以下代码保存为网页文件后用非 IE 浏览器打开。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        table{border-collapse: collapse;}
        th,td{padding: 5px;text-align: center;border:1px solid #999;min-width: 100px;}
        th{background-color: #333;color:#fff;position: sticky;top:-1px;z-index: 2;}
        td:first-child{background-color: #333;color: #fff;position: sticky;left:-1px;}
    </style>
    <script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            let t = new Vue({el:"#t"});
        });
    </script>
</head>

<body>
    <table id="t">
        <thead>
            <tr>
                <th v-for="(n,i) of 50">字段 {{i+1}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(n,i) of 100">
                <td v-for="(m,j) of 50">{{j+1}}</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

原理很简单,就是使用 CSS3 的 position: sticky 。它的作用就是当元素滚动到边界时保持固定。

该样式单独使用没有效果,必须同时加上 top、left 等定位的样式,这样浏览器才能知道固定到什么位置。

固定效果使用的是纯 CSS,没有任何脚本。示例代码中使用了 Vue ,主要是为了动态生成一个大的表格以体现固定效果。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页