項目實地：也可以在 【微信小程序】搜索體驗：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方案的固定首行首列，最簡單的實現方式

另一個體驗項目：官網