小程序实现简易的table表格

效果

HTML

<View className={styles['table']}>
     <View className={styles['table-tr']}>
           <View className={styles['table-th']}>名称</View>
           <View className={styles['table-th']}>有/无</View>
     </View>
     <View className={styles['table-tr']}>
     		// 这里可以map需求的数据
           <View className={styles['table-td']}>内容1</View>
           <View className={styles['table-td']}>内容2</View>
     </View>
</View>

CSS

 .table {
      border: 1px solid #e8e8e8;
      width: 650px;
      .table-tr {
        display: flex;
        width: 100%;
        justify-content: center;
        height: 85px;
        align-items: center;
        .table-th {
          width: 50%;
          justify-content: center;
          background: #f9fafc;
          color: #323332;
          display: flex;
          height: 85px;
          align-items: center;
          border-bottom: 1px solid #e8e8e8;
          border-right: 1px solid #e8e8e8;
        }
        .table-td {
          width: 50%;
          height: 85px;
          line-height: 85px;
          text-align: center;
          border-bottom: 1px solid #e8e8e8;
          border-right: 1px solid #e8e8e8;
        }
      }
    }