微信小程序绘制表格界面

 博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

目录

方法一：使用display:table

1：布局文件

2：css文件

3：js文件

4：问题说明

方法二：使用布局文件完成

1：布局文件

2：css文件

3：js测试数据

---

 微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

方法一：使用display:table

1：布局文件

<view class="su-table-box">

  <view class="su-table">

    <!-- 表格标题 -->

    <view class="su-tr">

      <view class="su-th" wx:for="{{th}}" wx:key="index">{{item}}</view>

    </view>

    <!-- 表格内容 -->

    <view class="su-tr" wx:for="{{td}}" wx:for-item="tdinfo" wx:key="index">

      <view class="su-td" wx:for="{{tdinfo}}" wx:key="index_">{{item}}</view>

    </view>

  </view>

 </view> 

2：css文件

.su-table-box {

  height: 100%;

  overflow-x: auto;

  padding-bottom: 40rpx;

}

.su-table {

  margin: 0 auto;

  display: table;

  border-collapse: collapse;

  overflow-x: auto;

  word-break: keep-all;

  white-space: nowrap;

  background-color: #FFFFFF;

  width: 90%;

  border-radius: 20rpx;

}

.su-tr {

  display: table-row;

}

.su-th {

  display: table-cell;

  height: 60rpx;

  line-height: 60rpx;

  text-align: center;

  border: 1rpx solid #DDDDDD;

  border-right: none;

  border-bottom: none;

  background-color: #87CEFA;

  color: #FFFFFF;

}

.su-td {

  padding: 0rpx 30rpx;

  display: table-cell;

  height: 60rpx;

  line-height: 60rpx;

  text-align: center;

  border: 1rpx solid #DDDDDD;

  border-right: none;

}

3：js文件

 data: {

    // 表格标题

    th: ["时间", "得分"],

    // 表格内容  这里只能使用 数组套数组格式

    td: [

      [

        "2021-11-03 13：36",      

        "10"

      ],

      [

        "2021-11-03 13：36",      

        "56"      

      ],

      

    ],

4：问题说明

使用这种方式绘制的表格在开发者工具显示的是没有问题的，以及在Android真机运行也没有问题；但是在ios真机上运行不显示表格界面信息；

方法二：使用布局文件完成

1：布局文件

   <!-- 绘制表格 -->
    <view style="margin-top: 25rpx;">

      <view style="display: flex;flex-direction: row;justify-content: space-around;">
        <view class="tableTou">
          姓名
        </view>
        <view class="tableTou">
          上车时间
        </view>
        <view class="tableTou">
          下车时间
        </view>
        <view class="tableTou">
          详细
        </view>
      </view>

      <view wx:for="{{dateData}}" wx:key="{{index}}" data-index="{{index}}" bindtap="lookCompany" >
        <view style="display: flex;flex-direction: row;justify-content: space-around;">
          <view class="tableTR">
            {{item.name}}
          </view>
          <view class="tableTR">
            08:00:00
          </view>
          <view class="tableTR">
            08:00:00
          </view>
          <view class="tableTR">
            查看
          </view>
        </view>
      </view>
    

    </view>

2：css文件

.tableTou {
  border: 1rpx solid #ddd;
  width: 25%;
  display: flex;
  background-color: #1ca8fd;
  height: 55rpx;
  justify-content: center;
  align-items: center;
}

.tableTR {
  border: 1rpx solid #ddd;
  width: 25%;
  display: flex;
  background-color: #f3f3f3;
  height: 55rpx;
  justify-content: center;
  align-items: center;
}

3：js测试数据

   dateData: [
    { "name": "王小明" },
    { "name": "王小花" },
    { "name": "王小豪" },
    { "name": "王小可" },
    { "name": "王小哦" },
    ],

留个脚印吧

大家要是感觉此篇文章有意义；那就给个关注、点赞，收藏吧；

🍅也可以关注文档末尾公众号🍅