Ant Design of Vue 组件 a-table 如何横向排列

利用<table>的原生组件<td>多列展示实现横向排列,具体代码如下

valign="top" 该属性不加会导致排列的表格错行

<table>
  <tr>
    <td valign="top" v-for="(item,index) of dataList">
      <a-table
        :ref="index"
        rowKey="id"
        :columns="[
          {title: item.title, align: 'center',width:150,dataIndex: 'name'},
          {title: item.title, align: 'center',width:150,dataIndex: 'id'}
        ]"
        :dataSource="item.data"
        :pagination = false
        :customRow="customRow"
      >
      </a-table>
    </td>
  </tr>
</table>

使用的数据格式为

[
      {
    title: '第一个表',
    data: [
      {
        name:"名字1",
        id:"111111"
      },
      {
        name:"名字2",
        id:"22222"
      }
    ]
  },
  {
    title: '第二个表',
    data: [
      {
        name:"名字1",
        id:"33333"
      },
      {
        name:"名字2",
        id:"4444"
      }
    ]
  },
  {
    title: '第三个表',
    data: [
      {
        name:"名字1",
        id:"55555"
      },
      {
        name:"名字2",
        id:"66666"
      }
    ]
  }
]

最终效果