javascript - 如何使用 css/js 为表中的每一行创建不同长度的列？

Question

所以我的表中有四行。我试图用列表中的数据填充每一列。以下是从左到右生成表格单元格，但我试图从上到下填充。不过，我不确定如何使用列表执行此操作。

  <template>
    <table>
    <tr>
      <td>Header 1</td>
      <td>Header 2</td>
      <td>Header 3</td>
      <td>Header 4</td>
    </tr>
    <tr>
      <template v-for='job in list1'>
      <td>{{ job.id }}</td>
      </template>
    </tr>
    <tr>
      <template v-for='job in list2'>
      <td>{{ job.id }}</td>
      </template>
    </tr>
    <tr>
    <template v-for='job in list3'>
      <td>{{ job.id }}</td>
    </template>
    </tr>
  </table>
  </template>

Answer 1

默认情况下，HTML 表格将标题显示在顶部，数据从左到右显示。

要扭转它，你应该尝试这样的事情

<template>
  <table>
    <tbody>
      <tr>
        <td>Header 1</td>
        <td v-for="job in list1">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 2</td>
        <td v-for="job in list2">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 3</td>
        <td v-for="job in list3">{{ job.id }}</td>
      </tr>
    </tbody>
  </table>
</template>