最近在用百度小程序写项目，遇到一个问题，设计图中有个左侧固定右侧横向滚动的表格，查看小程序文档组件，并没有完全一致的。
倒是有个差不多的，乍看差不多，实则完全不一样，方向什么的都不同，且未提供更改方向等的属性方法，所以无奈之下只能手写。又发现并不支持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 即可。
