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
css表格样式}
.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 即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。