【微信小程序遇到的坑】实现跨行跨列的表格

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