Table实现将表头放在右侧，数据在左侧

效果图：

这里使用Vue3.0写法实现这种效果
完整代码：

<script setup>
import { ref, computed, onMounted } from "vue"

const styleObject = ref({})
const s_showByRow = ref(false)
const tableData = ref([
  { key: "树种", value: "侧柏" },
  { key: "行政村", value: "**村" },
  { key: "镇场", value: "**镇" },
  { key: "X坐标", value: "447562.46587" },
  { key: "Y坐标", value: "3956877.25635" },
  { key: "小班", value: "8" },
  { key: "林班", value: "12" },
  { key: "林分编号", value: "*****1255" },
  { key: "单株编号", value: "*****12345" },
])

onMounted(() => {
  styleObject.value = { width: "600px" }
})

const rowCount = computed(() => {
  return Math.ceil(tableData.value.length / 2)
})
</script>
<template>
  <div class="animate__animated animate__fadeIn root">
    <button type="button" class="button blue larrow" @click="$router.replace('/')">返回主页</button>

    <table v-if="s_showByRow" class="mailTable" :style="styleObject">
      <tr v-for="index in rowCount" :key="index">
        <td class="column">{{ tableData[index * 2 - 2].key }}</td>
        <td>{{ tableData[index * 2 - 2].value }}</td>
        <td class="column">{{ tableData[index * 2 - 1] !== undefined ? tableData[index * 2 - 1].key : "" }}</td>
        <td>{{ tableData[index * 2 - 1] !== undefined ? tableData[index * 2 - 1].value : "" }}</td>
      </tr>
    </table>
    <table v-else class="mailTable" :style="styleObject">
      <tr v-for="index in rowCount" :key="index">
        <td class="column">{{ tableData[index - 1].key }}</td>
        <td>{{ tableData[index - 1].value }}</td>
        <td class="column">
          {{ tableData[rowCount + index - 1] !== undefined ? tableData[rowCount + index - 1].key : "" }}
        </td>
        <td>{{ tableData[rowCount + index - 1] !== undefined ? tableData[rowCount + index - 1].value : "" }}</td>
      </tr>
    </table>
  </div>
</template>

<style scoped lang="scss">
.mailTable,
.mailTable tr,
.mailTable tr td {
  border: 1px solid #e6eaee;
}
.mailTable {
  font-size: 12px;
  color: #71787e;
}
.mailTable tr td {
  border: 1px solid #e6eaee;
  width: 150px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
}
.mailTable tr td.column {
  background-color: #eff3f6;
  color: #393c3e;
}
</style>