Vue修改表格横向排列

如果你想在Vue中修改表格的横向排列，可以考虑使用CSS Flexbox布局。以下是一个简单的示例：

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in people" :key="index">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td>{{ person.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: "Alice", age: 25, gender: "Female" },
        { name: "Bob", age: 30, gender: "Male" },
        { name: "Charlie", age: 35, gender: "Male" },
      ],
    };
  },
};
</script>

<style>
.table-container {
  display: flex;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
}
</style>

在上述示例中，我们使用`display: flex`将表格容器设置为Flexbox布局。我们还将`overflow-x`属性设置为`auto`以启用水平滚动条。表格本身的宽度设置为100%，每个单元格都有一个黑色的边框和一个8px的内边距。您可以根据需要进行调整。