小程序表格

实现效果1

image.png

WXML

  
    head1
    head2
    head3
  
  
    
      {{item.code}}
      {{item.text}}
      {{item.type}}
    
    
      {{item.code}}
      {{item.text}}
      {{item.type}}
    
  

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;
}

实现效果2

image.png

WXML

  
    1
    2
    3
    4
    
  
  
    1
    2
    3
    4
  
  
    1
    2
    3
    4
  
  
    1
    2
    3
    4
  
  
    1
    2
    3
    4
  

WXSS

#panel{
  height:auto;
  background:#fff;
}
#panel text{
  line-height: 9vh;
  border-right: 1rpx solid #ddd;
  border-bottom: 1rpx solid #ddd;
}
.flex-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.flex-cell{
  flex: 1;
}