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

最新推荐文章于 2025-07-01 16:16:59 发布

原创最新推荐文章于 2025-07-01 16:16:59 发布 · 5.6k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #tabl

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在微信小程序中自定义实现一个带有跨行跨列功能的复杂表格。通过提供的WXML和WXSS代码示例，展示了如何布局表格结构并实现特定样式的表格单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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