看圖片效果
image.png
<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 {
// 示例數(shù)據
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>
