Css 如何创建左侧有标题且有多行的表

我有一个表，其中可能有不同数量的列（标题）和不同数量的数据。正在使用

v-for

填充它。示例代码如下所示：

     <div class="table-responsive">
        <table class="table">
            <thead><tr>
                <th v-for="header in table_headers">
                    <span>@{{header}}</span>
                </th>
            </tr></thead>
            <tbody>
                <tr v-for="body in table_body">
                    <td>
                       @{{body}}    
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

如何将其转换为第一列有标题，第二列有所有数据的表：

+---------+-------------+
| Name    | Christopher |
| Middle  | Ashton      |
| Surname | Kutcher     |
| ------- | ----------- |
| Name    | William     |
| Middle  | Bradley     |
| Surname | Pitt        |
| ------  | ----------- |
| Name    | Thomas      |
| Middle  | Sean        |
| Surname | Connery     |
+---------+-------------+

JSON格式的数据：

{
  "columns": {
    "0": "Name",
    "1": "Middle",
    "2": "Surname"
  }
}

{
  "data": {
    "Name": ["Christopher", "William", "Thomas"],
    "Middle": ["Ashton", "Bradley", "Sean"],
    "Surname": ["Kutcher", "Pitt", "Connery"]
  }
}

---

假设您拥有以下数据：

data() { return {
  names: [ 
    { "Name": "Christopher", "Middle": "Ashton", "Surname": "Kutcher" },
    { "Name": "William", "Middle": "Bradley", "Surname": "Pitt" },
    { "Name": "Thomas", "Middle": "Sean", "Surname": "Connery" },
  ]
}

这将是您的HTML：

<table>
  <tr v-for="name in names">
    <td>
      <div v-for="key in Object.keys(name)">{{ key }}</div>
    </td>
    <td>
      <div v-for="value in Object.values(name)">{{ value }}</div>
    </td>
  </tr>
</table>

{{key}}
{{value}}

let模板=`
{{key}}
{{value}}
`
新Vue({
el:“应用程序”，
模板，
data（）{return{
姓名：[
{“姓名”：“克里斯托弗”，“中间”：“阿什顿”，“姓氏”：“库彻”}，
{“姓名”：“威廉”，“中间名”：“布拉德利”，“姓氏”：“皮特”}，
{“姓名”：“托马斯”，“中间”：“肖恩”，“姓氏”：“康纳利”}，
]
}
}
});

在表格中，不能在
t正文
的左侧有
thead
。如果你只想达到你展示的视觉效果（而且你不关心HTML的语义使用），那很容易做到。是的，我只需要视觉效果。你能给我一些如何写的指导吗？请将数据以JSON的形式发布。我会在一分钟内尝试，然后接受你的答案。非常感谢。有没有办法使这两列的大小相同？我试着用
包装周围的所有东西，后来在
类中添加了这两个
标记：
，但它没有帮助，而且它强制它去
内联
而不是
块
表{table layout:fixed；}table td{width:50%；}
哇，现在速度太快了！是的，这可能是一个解决方案，但我被告知我不允许更改
css
，因为在这个项目中我们使用的是bootstrap，所以我应该使用它的类修复所有问题。但是谢谢，如果我找不到其他东西，我会用这个，谁在乎呢
<table>
  <tr v-for="name in names">
    <td>
      <div v-for="key in Object.keys(name)">{{ key }}</div>
    </td>
    <td>
      <div v-for="value in Object.values(name)">{{ value }}</div>
    </td>
  </tr>
</table>