滚动表格

纯css方案实现一个，左侧和顶部固定导航栏且随动的表格
适用于抖音，微信，h5


<scroll-view class="sm-table-data" scroll-x scroll-y>
    <!-- 这里需要一个box包裹，宽高为fit-content，不然会有虚拟边界，导致内容达到scroll-view可视边界后， sticky 失效-->
    <view class="std-box">
        <!-- 关键点： 得左边栏先渲染，占据当前ele的宽度，后续渲染元素都会跟随。 float和sticky关键-->
        <!-- 左侧栏 -->
        <view class="std-left-sticky">
            <view class="sls-item" v-for="(e,i) in 20" :key="i"> {{ e }} </view>
        </view>
        <!-- 顶部栏 -->
        <view class="std-top-sticky">
            <view class="sts-item" v-for="(e, i) in 10" :key="i">{{ 'name' + i }}</view>
        </view>
        <!-- 表格 -->
        <view class="std-data">
            <view class="sd-column" v-for="(e, i) in 10" :key="i">
                <view class="sc-row" v-for="(k, j) in 19" :key="j">{{ `￥${j}` }}</view>
            </view>
        </view>
    </view>
    
</scroll-view>


.sm-table-data{
    position: relative;
    height: 600upx;
    .std-box{
        width: fit-content;
        /* 不知道为什么会有20像素是隐藏的 */ 
        padding-bottom: 40upx;
    }
    .std-left-sticky{
        position: sticky;
        /* 这里如果添加top: 0; 的话会导致表格错开一位*/ 
        left: 0;
        float: left;
        z-index: 5;
        height: fit-content;
        .sls-item{
            position: relative;
            width: 112upx;
            height: 100upx;
            border-right: 2upx solid #D8D8D8;
            background-color: burlywood;
            &:first-child{
                height: 70upx;
            }
            &:nth-child(odd){
                background-color: skyblue;
            }
        }
        
    }
    .std-top-sticky{
        position: sticky;
        top: 0;
        z-index: 2;
        width: fit-content;
        white-space: nowrap;
        font-size: 0;
        .sts-item{
            width: 196upx;
            display: inline-block;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            @include flcw(24upx, 70upx, #333, 500);
            background-color: #ff0;
            &:nth-child(odd){
                background-color: #f00;
            }
        }
    }
    .std-data{
        white-space: nowrap;
        width: fit-content;
        .sd-column{
            display: inline-block;
            width: 196upx;
            &:nth-child(odd){
                .sc-row{
                    background: #0f0;
                    &:nth-child(odd){
                        background: #0ff;
                    }
                }
            }
            .sc-row{
                position: relative;
                width: 100%;
                height: 100upx;
                background: #0ff;
                &:nth-child(odd){
                    background: #0f0;
                }
            }
        }
    }
}