微信小程序上实现 表格

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

table.wxml

   
   

     
     

      
      

     
     
     
     

      
      

       
       <view class="table">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <view class="tr bg-w">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <view class="th">head1
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <view class="th">head2
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <view class="th ">head3
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <block wx:for="{{listData}}" wx:key="{{code}}">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       <view class="td">{{item.code}}
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       <view class="td">{{item.text}}
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       <view class="td">{{item.type}}
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <view class="tr" wx:else>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       <view class="td">{{item.code}}
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       <view class="td">{{item.text}}
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       <view class="td">{{item.type}}
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       </view>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </block>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </view>
      
      
     
     
   
   

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') 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       })
      
      
     
     
   
   

效果图

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