开源cms建站免费做网站自助建站
项目实地：也可以在 【微信小程序】搜索体验：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方案的固定首行首列，最简单的实现方式