小程序简易表格

 效果如图：

直接上代码！ 

        <view class="tableView">
          <view class="table_header1">
            <view class="th_1">排名情况</view>
          </view>
          <view class="table_header2">
            <view class="th_2 th1">排名</view>
            <view class="th_2 th2">员工</view>
            <view class="th_2 th3">完成/目标</view>
          </view>
          <!-- <block> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 -->
          <block wx:for="{{ listData }}" wx:for-item="work" wx:key="key">
            <view class="table_cell">
              <view class="td td1">{{work.id}}</view>
              <view class="td td2">{{work.name}}</view>
              <view class="td td3">{{work.content}}</view>
            </view>
          </block>

        </view>

JS 

  data = {
    listData: [
      { id: '1', name: '张三', content: '4/1' },
      { id: '2', name: '李四', content: '4/4' },
      { id: '3', name: '王某某', content: '4/2' },
      { id: '4', name: '章某', content: '4/4' },
    ],
  }
  watch = {}

CSS

// 表格部分
.tableView {
  border: 1px solid #000;
  border-right: 0;
  border-bottom: 0;
  width: 98%;
  margin-left: 1%;
}
/* 表头1 */
.table_header1 {
  display: flex;
  background-color: #f9f9f9;
  justify-content: space-between; /* 项目位于各行之间留有空白的容器内。 */
  width: 100%;
  font-size: 25rpx;
  color: #330e0e;
  text-align: center;
  font-weight: 900;
}
/* 表头2 */
.table_header2 {
  display: flex;
  justify-content: space-between; /* 项目位于各行之间留有空白的容器内。 */
  width: 100%;
  font-size: 25rpx;
  color: #330e0e;
  text-align: center;
  font-weight: 900;
}
.th_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.th_1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.th1,
.th2 {
  width: 20%;
}
.th3 {
  width: 60%;
}
/* 表格cell */
.table_cell {
  display: flex;
  justify-content: space-between; /* 项目位于各行之间留有空白的容器内。 */
  width: 100%;
  font-size: 25rpx;
  color: #330e0e;
  text-align: center;
}
.td {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.td1,
.td2 {
  width: 20%;
}
.td3 {
  width: 60%;
}