表格纵向表头展示

vue页面

<template>
    <div>
        <table style="width: 100%" class="myTable">
                        <tr v-for="(item,i) in tableData" :key="i">
                        <td class="column" align='left'>{{ item.key }}</td>
                        <td class="column">{{ item.value }}</td>
                        </tr>
       </table>
    </div>
</template>

要展示的数据

 tableData: [
                {key: '名称', value: '1001'},
                {key: '工称', value: '篮球'},
                {key: '编号', value: '120.00'},
]

表格样式

<style scoped>
.myTable {
 border-collapse: collapse;
 margin: 0 auto;
 text-align: center;
}
  
.myTable td,
.myTable th {
 border: 1px solid #cad9ea;
 color: #666;
 height: 35px;
}
</style>

效果图

名称	1001
工称	篮球
编号	120.00