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

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

另一个体验项目：官网

一、效果展示

二、代码展示

（1）html 部分

<view class="table"><view class="tr"><view class="th">股票代码	</view><view class="th">建议投金额	</view><view class="th">实际投金额	</view><view class="th">建议股数	</view><view class="th">实际股数	</view><view class="th">◎原单价		</view><view class="th">涨出-单价 ↑	</view><view class="th">跌出+单价 ↓	</view><view class="th">+○预赚		</view><view class="th">+●实赚		</view><view class="th">-○预赔		</view><view class="th">-●实赔		</view><view class="th">操作		</view></view><block v-for="(item, index) in tableUpData" :key="index"><view class="tr"><view class="td">{{item.stockCode}}</view><view class="td">{{ item.calculAdvsIvsMoney  		}}</view><view class="td">{{ item.calculRealIvsMoney  		}}</view><view class="td">{{ item.tradeCount 			    }}</view><view class="td">{{ item.tradeRealCount 			}}</view><view class="td">{{ item.unitPriceNow 			    }}</view><view class="td"> <span :style="fontColor.up" 	> {{ item.upOutUnitPrice 			}} </span> </view><view class="td"> <span :style="fontColor.down" > {{ item.downOutUnitPrice 			}} </span> </view><view class="td"> <span :style="fontColor.up"   > {{ item.expectIncomeMoney 		}} </span> </view><view class="td"> <span :style="fontColor.up"   > {{ item.expectIncomeMoneyReal 	}} </span> </view><view class="td"> <span :style="fontColor.down" > {{ item.expectOutcomeMoney 		}} </span> </view><view class="td"> <span :style="fontColor.down" > {{ item.expectOutcomeMoneyReal 	}} </span> </view><view class="td"><view class="uni-group"><button @tap="addOrUpdateOne(item, 'addOne')" class="uni-button" style="background-color: #e1f3d8; color: #09bb07;" size="mini" type="primary" v-if="isNewStockCode">新收</button><button @tap="addOrUpdateOne(item, 'updateOne')" class="uni-button" style="background-color: #e1f3d8; color: #e6a23c;" size="mini" type="warn" v-if="isNewStockCode==false">更新</button></view></view></view></block></view>

（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方案的固定首行首列，最简单的实现方式

另一个体验项目：官网