项目实地：也可以在 【微信小程序】搜索体验：xny.handbook
另一个体验项目：官网
一、效果展示
二、代码展示
（1）html 部分
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 部分
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;
}