仿Excel冻结单元格效果

最新推荐文章于 2024-05-11 13:08:40 发布

Hedy_Liiiiiiii

最新推荐文章于 2024-05-11 13:08:40 发布

阅读量198

点赞数

分类专栏： h5+css3

本文链接：https://blog.csdn.net/weixin_38752368/article/details/105455334

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 
			设置position:sticky同时给一个(top,bottom,right,left)之一即可
			使用条件：
			1、父元素不能overflow:hidden或者overflow:auto属性。
			2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
			3、父元素的高度不能低于sticky元素的高度
			4、sticky元素仅在其父元素内生效 
		-->
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			.contain {
				border: 1px solid #cdd;
				width: 900px;
				height: 400px;
				overflow: scroll;
				position: relative;
				float: left;
				top: 100px;
				left: 250px;
			}
			.tb1 {
				background: palegoldenrod;
				position: fixed;
				z-index: 10001;
				width: 200px;
			}
			
			.tb2 {
				background: gray;
				position: sticky;
				top: 0px;
				margin-left: 200px;
				width: 800px;
				z-index: 1000;
			}
			.tb3 {
				background: gray;
				left: 0px;
				height: 100%;
				float: left;
				position: sticky;
				z-index: 1000;
				width: 200px;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hedy_Liiiiiiii

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿Excel冻结单元格效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- 设置position:sticky同时给一个(top,bottom,right,left)之一即可使用条件： 1、父元素不能overfl...
复制链接

扫一扫