微信小程序用表格＜table＞＜/table＞查看数据

微信小程序不支持 table 标签，所以自己写了一个，记录一下方便以后可以直接复制使用

图片，可以自己修改样式

index.js,也就是数据，这里写死，可以字自己对接口

**

• [ ]

index.wxml,显示页面

<!--pages/index/index.wxml-->
<view class="table">
    <view class="tr">
        <view class="th">id</view>
        <view class="th">type</view>
        <view class="th">name</view>
    </view>
    <block wx:for="{{list}}" wx:key="item">
        <view class="tr">
            <view class="td">{{item.id}}</view>
            <view class="td">{{item.type}}</view>
            <view class="td">{{item.name}}</view>
        </view>
    </block>
</view>

**

index.wxss文件，也就是css样式

/**index.wxss**/

/*整个表格*/
.table{
  font-size: 15px;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
}
/*设置行*/
.tr {
  width: 100%;
  display: flex;
  /*垂直居中*/
  align-items: center;
  /*水平居中*/
  justify-content: center;
  height: 3rem;
}
/*设置所有单元格*/
.th,.td{
   width: 40%;
  /*文字居中*/
  text-align: center;
  /*垂直居中*/
  align-items: center;
  /*水平居中*/
  justify-content: center;
  /*和上面.tr的height对应，数值修改一样就可*/
  height: 3rem;
}
/*设置表格边框的边框，不想麻烦所以所有的边框都在这里写了，可以自己修改*/
.tr,.th,.td,.table{
  border: 1rpx solid blue;
}
/*标题单元格*/
.th {
  display: flex;
  background: red;
  color: yellow;
  font-size: large;
}
/*文字单元格*/
.td{
  padding-top: 50rpx;
  background:gray;
}