微信小程序上实现 <table> 表格

傷城~ 2022-05-24 11:34 1211阅读 0赞

微信小程序不支持 table 标签，在网上找到一个使用 flex 来实现表格的简明例子，记录一下。

table.wxml

table.wxss

.table {
      border: 0px solid darkgray;
    }
    .tr {
      display: flex;
      width: 100%;
      justify-content: center;
      height: 3rem;
      align-items: center;
    }
    .td {
        width:40%;
        justify-content: center;
        text-align: center;
    }
    .bg-w{
      background: snow;
    }
    .bg-g{
      background: #E6F3F9;
    }
    .th {
      width: 40%;
      justify-content: center;
      background: #3366FF;
      color: #fff;
      display: flex;
      height: 3rem;
      align-items: center;
    }

table.js

Page({
      data: {
        listData:[
          {"code":"01","text":"text1","type":"type1"},
          {"code":"02","text":"text2","type":"type2"},
          {"code":"03","text":"text3","type":"type3"},
          {"code":"04","text":"text4","type":"type4"},
          {"code":"05","text":"text5","type":"type5"},
          {"code":"06","text":"text6","type":"type6"},
          {"code":"07","text":"text7","type":"type7"}
        ]
      },
      onLoad: function () {
        console.log('onLoad') 
      }
    })

效果图

![20180526113519429][]

原文地址： [https://blog.csdn.net/MoDingXiao/article/details/54694730][https_blog.csdn.net_MoDingXiao_article_details_54694730]

[20180526113519429]: /images/20220524/1ec86983cfb249aa86db0b3927617ab1.png
[https_blog.csdn.net_MoDingXiao_article_details_54694730]: https://blog.csdn.net/MoDingXiao/article/details/54694730