详情页表格样式

html:
           <h3 class="detail-title">车辆信息</h3>
            <el-row class="detail-item-wrap">
              <el-col :span="12" class="cell-wrap">
                <div class="cell-label">
                  <span class="label">车牌号码</span>
                </div>
                <div class="cell-value">
                  <span class="value">{{model.subsystemName}}    
                  </span>
                </div>
              </el-col>
              <el-col :span="12" class="cell-wrap">
                <div class="cell-label">
                  <span class="label">车牌颜色</span>
                </div>
                <div class="cell-value">
                  <span class="value">{{model.subsystemName}} 
                  </span>
                </div>
              </el-col>
              <el-col :span="12" class="cell-wrap">
                <div class="cell-label">
                  <span class="label">注册时间</span>
                </div>
                <div class="cell-value">
                  <span class="value">{{model.subsystemName}} 
                  </span>
                </div>
              </el-col>
              <el-col :span="12" class="cell-wrap">
                <div class="cell-label">
                  <span class="label">燃料类型</span>
                </div>
                <div class="cell-value">
                  <span class="value">{{model.subsystemName}} 
                  </span>
                </div>
              </el-col>
         </el-row>

    

css:

.detail-title {
      font-size: 15px;
      font-weight: 700;
      padding: 15px 0;
      line-height: 1;
    }
    .detail-item-wrap {
      border-right: 1px solid #DDDDDD;
      border-bottom: 1px solid #DDDDDD;
    }
    .cell-wrap {
      height: 50px;
      border-top: 1px solid #DDDDDD;
      border-left: 1px solid #DDDDDD;
      display: flex;
      .cell-label {
        width: 114px;
        // background: #F5F5F5;
        border-right: 1px solid #ddd;
        line-height: 50px;
        padding-left: 15px;
      }
      .cell-value {
        flex: 1;
        font-size: 14px;
        color: #333333;
        padding-left: 14px;
        font-weight: 400;
        line-height: 50px;
        &.text-center {    // 一行时居中，多行时会换行，出现滚动条
          line-height: 1.5;
          padding-top: 5px;
          overflow: auto;
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
      .cell-auto-height {
        height: 100%;
        overflow-y: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
      }
      .tc-item {
        box-sizing: border-box;
        padding: 0 7px;
        background: #E9E9E9;
        border-radius: 4px;
        margin-right: 4px;
        display: inline-block;
        height: 26px;
        line-height: 26px;
        margin: 4px 4px 0 0;
      } 
    }

样例图：

单行：