vue 实现表格头部在左侧，内容在右侧

需求截图

代码展示

<div class="vertical-header-table">
                    <div class="table-row table-highlight">
                        <div class="header-cell">序号</div>
                        <div class="data-cell" v-for="(item, index) in tableData" :key="index">{{ item.id }}</div>
                    </div>
                    <div class="table-row table-highlight">
                        <div class="header-cell">项目</div>
                        <div class="data-cell" v-for="(item, index) in tableData" :key="index">{{ item.time }}</div>
                    </div>
                    <div class="table-row">
                        <div class="header-cell">时间</div>
                        <div class="data-cell" v-for="(item, index) in tableData" :key="index">{{ item.project_name }}</div>
                    </div>
                </div>
                
                
                
// show data
const tableData = [
    { id: 1, project_name: '项目A', time: '2023-12-25', },
    { id: 2, project_name: '项目B', time: '2023-12-26', },
    { id: 3, project_name: '项目C', time: '2023-12-27', },
]