html+css实现左侧固定右侧横向滚动的表格（百度小程序中怎么写表格样式）

  最近在用百度小程序写项目，遇到一个问题，设计图中有个左侧固定右侧横向滚动的表格，查看小程序文档组件，并没有完全一致的。

  倒是有个差不多的，乍看差不多，实则完全不一样，方向什么的都不同，且未提供更改方向等的属性方法，所以无奈之下只能手写。又发现并不支持table、th、td等，所以只能用 view 拼凑咯。

  以下是我整理的一个小Demo，由百度小程序 view 写法改成了HTML中的 div 写法，可能有点简陋，但是自己还是蛮满意的，😄。

  先来看样子，红色边框是我定的外部宽度。

  再来上代码

<div class="t-b">
    <div>
        <div class="t-b-1">
            <div>序号</div>
            <div>姓名</div>
            <div>性别</div>
        </div>
        <div class="t-b-1">
            <div>1</div>
            <div>小王</div>
            <div>男</div>
        </div>
    </div>
    <div>
        <div class="t-b-2">
            <div>年龄</div>
            <div>语文成绩</div>
            <div>数学成绩</div>
            <div>英语成绩</div>
            <div>物理成绩</div>
            <div>化学成绩</div>
            <div>生物成绩</div>
        </div>
        <div class="t-b-2">
            <div>18</div>
            <div>110</div>
            <div>120</div>
            <div>110</div>
            <div>40</div>
            <div>50</div>
            <div>60</div>
        </div>
    </div>
</div>

.t-b {
    width: 400px;
    border: 1px solid #ff0000;
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: 14px;
    padding: 15px 0;
}

.t-b>div:nth-child(1) {
    box-shadow: 0 2px 8px #818181
}

.t-b>div:nth-last-child(1) {
    overflow: scroll;
}

.t-b-1,.t-b-2{
    width:186px;
    display:flex;
}

.t-b-2 {
    width: 434px;
}

.t-b-1 div,
.t-b-2 div {
    border: 1px solid #f0f0f0;
    width:60px;
    height:25px;
    line-height:25px;
}

.t-b-1:nth-child(1) {
    background-color: #f0f0f0;
}

.t-b-2:nth-child(1) {
    background-color: #f0f0f0;
}

  这样就 OK 啦。

  如果在百度小程序中使用，只需要将 div 变成 view，将 px 变成 rpx 即可。