将以下代码保存为网页文件后用非 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 ，主要是为了动态生成一个大的表格以体现固定效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
