由于微信小程序组件中不带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;
}