不使用table自己写一个小表格

有的时候需要自己写一个简单的小表格，只是简单展示一下数据就可以了，我是这样写的

<div class="table_div" v-for="(value,key) in objData">
        <el-row>
          <el-col :span="12"><span class="span_class_key">{{key}}</span></el-col>
          <el-col :span="12"><span class="span_class">{{value}}</span></el-col>
       </el-row>
</div>

table_div是设置了边框的，这就导致了多条数据展示的时候会出现边框重叠的现象，导致重叠的地方边框线特别的粗，可以加一些margin值来解决

.table_div{
    border: #6e6e6e 1px solid;
    margin-bottom:1px;
    margin-top:-2px;
    padding: 15px;
  }

  .span_class_key{
    height: 60px;
    font-weight:bold;
  }

  .span_class{
    height: 60px;
  }

未设置margin值之前的效果

1.png

设置margin值之后的效果

2.png