固定表头、首列 —— uniapp、vue 项目

项目实地：也可以在 【微信小程序】搜索体验：xny.handbook

另一个体验项目：官网

一、效果展示

二、代码展示

（1）html 部分

     
 		股票代码	
 		建议投金额	
 		实际投金额	
 		建议股数	
 		实际股数	
 		◎原单价		
 		涨出-单价 ↑	
 		跌出+单价 ↓	
 		+○预赚		
 		+●实赚		
 		-○预赔		
 		-●实赔		
 		操作		
     
     
        
        {{item.stockCode}}
 		{{ item.calculAdvsIvsMoney  		}}
 		{{ item.calculRealIvsMoney  		}}
 		{{ item.tradeCount 			    }}
 		{{ item.tradeRealCount 			}}
 		{{ item.unitPriceNow 			    }}
 		  {{ item.upOutUnitPrice 			}}  
 		  {{ item.downOutUnitPrice 			}}  
 		  {{ item.expectIncomeMoney 		}}  
 		  {{ item.expectIncomeMoneyReal 	}}  
 		  {{ item.expectOutcomeMoney 		}}  
 		  {{ item.expectOutcomeMoneyReal 	}}  
 		
 			
 				新收
 				更新
 			
 		
        
     
 

（2）css 部分

	/* ----------------------- */
	/* 固定首行首列 */
	.table-container{
	  width: 100%;
	  height: 70vh;
	  position: absolute;
	}
	/* 下面这里必须要有overflow:auto;,结合上面外部的 position: absolute; 才可以实现首行首列固定 */
	.table{
	  width: 100%;
	  max-height: 70vh;
	  overflow:auto;
	  position: relative;
	}
	.tr {
	      display: flex;
		  min-width: max-content; /* 保留内容宽度基准 */
		  width: 100%;    /* 至少充满容器宽度 */
	  }
	.th,.td {
		flex: 1;  /* 关键：自动分配剩余空间 */
	    min-width: 100px; /* 对每个单元格设置宽高, 宽同表格一致 */
	    height: 30px;
	    /* 每个格背景设置透明, 滑动的时候就好隐藏 */
	    /*  background-color: #fff; */
	    display: flex;
	    justify-content: center;
	    align-items: center;
		font-size: 14px;
		color: #6a6a6a;
		border-top: 1px solid #e8e8e8; /* 边框 */
		border-right: 1px solid #e8e8e8; /* 右侧边框 */
		border-bottom: 1px solid #e8e8e8; /* 底部边框 */
	}
	.th{
	    /* 设置背景色, 滑动的时候就不会重叠字样了. */
	    background-color: #f4f6ff;
	    text-align: center;
		font-weight: bold;
	}
	 
	/* 表头部分 */
	.tr:first-child {
	    /* 将第一个格设置 sticky, 往上滑则固定住 */
	    position: sticky;
	    top: 0;
	    /* 提升表格的重叠权重, 显示出来, 同时将内容设置为透明, 就实现了固定表头的效果 */
	    z-index: 2;
	    background-color: aqua;
	}
	
	/* 隔行背景色 */
	.tr:nth-child(even) .td {
		background-color: #f8f9fa; /* 偶数行 */
	}
	.tr:nth-child(odd) .td {
		background-color: #ffffff; /* 奇数行 */
	}
	 
	/* 首行第一个单元格进行固定 */
	/* 每行第一个单元格进行固定, 宽度和表格一致对齐 */
	.th:first-child,
	.td:first-child{
	    position: sticky;
	    width: 100px;   /* 固定宽度不参与flex分配。最好与 .th,.td 中 min-width 值一致，否则会出现 错乱对不齐  */
	    left: 0;
		z-index: 1;
		/* flex: 0 0 150rpx; 固定宽度不参与flex分配 */
	    /* background-color: aquamarine; */
		/* background-color: #f4f6ff !important; /* 覆盖隔行颜色  */
	}
	 
	/* 将滚动条设置隐藏 */
	::-webkit-scrollbar {
	    width: 0;
	    height: 0;
	}
	
	/* 防止列挤压 */
	.th:not(:first-child),
	.td:not(:first-child) {
	  flex-shrink: 0;
	}

三、参考内容：

 1. uni-app下表格纯CSS方案的固定首行首列，最简单的实现方式

另一个体验项目：官网