由于微信小程序组件中不带table标签,所以只能自己制作一个table表格,并且是实现跨行跨列的复杂表格。
直接上代码,即可预览效果
wxml
<view class="table">
<view class="tr tr_title">
上午8:30-11:45
</view>
<view class="tr bg-w">
<view class="th width1">板块</view>
<view class="th width2">时间</view>
<view class="th width2">环节</view>
<view class="th width1">时长</view>
</view>
<view class='tr'>
<view class="td td_center">开场</view>
<view class="td width2">
<view class="tdd2">签到/暖场(展示区开放)</view>
<view class="tdd2 border-none">签到/暖场(展示区开放)</view>
</view>
<view class="td width2">
<view class="tdd2">签到/暖场(展示区开放)</view>
<view class="tdd2 border-none">签到/暖场(展示区开放)</view>
</view>
<view class="td width1 td_center">60分钟</view>
</view>
<block wx:for="{{6}}" wx:key="">
<view class="tr">
<view class="td">业绩展示</view>
<view class="td width2">09:30-09:35</view>
<view class="td width2">主持人开场</view>
<view class="td">5分钟</view>
</view>
</block>
</view>
wxss
.table {
border-bottom: 1rpx solid #555;
position: absolute;
top: 50rpx;
left: 0;
right: 0;
margin: auto;
width: 96%;
font-size: 14px;
}
.tr {
display: flex;
width: 100%;
border-top: 1rpx solid #555;
border-left: 1rpx solid #555;
color: #555;
box-sizing: border-box;
}
.tr_title{
display:block;
text-align:center;
padding:20rpx 0;
border-right: 1px solid #333;
}
.td {
width: 20%;
justify-content: center;
text-align: center;
border-right: 1rpx solid #555;
padding: 20rpx 0;
}
.th {
justify-content: center;
display: flex;
height: 3rem;
align-items: center;
color: #555;
border-right: 1rpx solid #555;
}
.td_center {
display: flex;
align-items: center;
}
.tdd2 {
border-bottom: 1px solid #333;
padding: 4px;
}
.width1 {
width: 20%;
}
.width2 {
width: 30%;
}
.bg-g {
background: #e6f3f9;
}
.border-none {
border: none;
}