使用div画一个表格

看图片效果

<template>  
  <div class="table">  
 
      <div class="table-row" v-for="user in users" :key="user.id">  
        <div class="table-cell">{{ user.id }}</div>  
        <div class="table-cell">{{ user.name }}</div>  
        <div class="table-cell">{{ user.email }}</div>  
      </div>  
 
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      // 示例数据  
      users: [  
        { id: 1, name: 'Alice', email: 'alice@example.com' },  
        { id: 2, name: 'Bob', email: 'bob@example.com' },  
        { id: 3, name: 'Charlie', email: 'charlie@example.com' },  
        { id: 4, name: 'David', email: 'david@example.com' },  
        { id: 5, name: 'Eva', email: 'eva@example.com' }  
      ]  
    };  
  }  
};  
</script>  

<style scoped>  
.table {  
  display: table; /* 使 div 像表格 */  
  width: 100%;  
  border-collapse: collapse; /* 边框合并*/
}  

.table-row {  
  display: table-row;
   /* 使 div 像表格行 */  
}  
 

.table-cell {  
  display: table-cell; /* 使 div 像表格单元 */  
  border: 1px solid #ccc; /* 边框 */  
  padding: 10px; /* 内边距 */  
  text-align: left; /* 左对齐 */  
}  
  
</style>