div模拟表格，可以依据列数不同进行调节

模拟表格

需求分析

html的table有时候不能完全满足需求，就需要我们自己用div模拟绘制一个，于是就有了这个案例demo。
目前实现的是两列效果，如果需要三列，将$w-i:50%; 改为 $w-i:33.3333%; ；将最后一列的补白<li v-if="list&&list.length%2==1" class="tableHa_list_i"><span class="tableHa_list_i_l"></span><span class="tableHa_list_i_v"></span></li>相应的修改，其他依次类推。

代码采用技术

vue+scss，如果使用其他预处理器，请将变量定义方式修改一下

效果图

完整demo代码

<template>
<div class="">
    <div class="tableHa">
        <h2 class="tableHa_t">这里是表格标题</h2>
        <ul class="tableHa_list">
            <li v-for="(item,index) in list" :key="index" class="tableHa_list_i">
                <span class="tableHa_list_i_l">{{item.l}}</span><span class="tableHa_list_i_v">{{item.v}}</span>
            </li>
            <li v-if="list&&list.length%2==1" class="tableHa_list_i"><span class="tableHa_list_i_l"></span><span class="tableHa_list_i_v"></span></li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            list:[
                {
                    l:'姓名',
                    v:'张四'
                },
                {
                    l:'手机',
                    v:'18210803600'
                },
                {
                    l:'公司名称',
                    v:'xxxx电子商务（北京）有限公司'
                },
                {
                    l:'网址',
                    v:'http://www.highset.cn'
                },
                {
                    l:'地址',
                    v:'北京市朝阳区万科时代中心，五层五单元五排五号位5555号'
                },
            ]
        }
    },

}
</script>

<style lang="scss">
    .tableHa{
        $bgc-l:#f2f2f2;
        $bor-color:#e2e4e6;
        $w-i:50%;
        $w-l:30%;
        $w-r:70%;
        width:1000px;
        margin:50px;
        // 标题
        &_t{
            text-align: center;
            margin-bottom: 10px;
        }
        // 列表
        &_list{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            border-bottom: 1px solid $bor-color;
            border-right: 1px solid $bor-color;
            // 列表项
            &_i{
                flex:0 0 $w-i;
                width: $w-i;
                display: flex;
                &_l,&_v{
                    display: inline-block;
                    padding: 10px;
                }
                // 左侧标签名 label
                &_l{
                    background-color: $bgc-l;
                    border-left: 1px solid $bor-color;
                    border-top: 1px solid $bor-color;
                    width: $w-l;
                    flex:0 0 $w-l;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                // 右侧内容 value
                &_v{
                    border-left: 1px solid $bor-color;
                    border-top: 1px solid $bor-color;
                    width: $w-r;
                    flex:0 0 $w-r;
                }
            }
        }
    }
</style>

附：3列补白

<li v-if="list&&list.length%3==1" class="tableHa_list_i"><span class="tableHa_list_i_l"></span><span class="tableHa_list_i_v"></span></li>
            <li v-if="list&&list.length%3==1" class="tableHa_list_i"><span class="tableHa_list_i_l"></span><span class="tableHa_list_i_v"></span></li>
            <li v-if="list&&list.length%3==2" class="tableHa_list_i"><span class="tableHa_list_i_l"></span><span class="tableHa_list_i_v"></span></li>