Javascript Vuetify对齐不同组件的列

假设我有一个使用Vuetify及其组件的应用程序

<template>
  <v-app>
    <v-main>
      <v-container class="elevation-1">
        <v-data-table :headers="headers" :items="items" disable-sort
                      hide-default-footer class="elevation-0">
        </v-data-table>
        <v-row>
          <v-col>
            <v-text-field label="A"></v-text-field>
          </v-col>
          <v-col>
            <v-text-field label="B"></v-text-field>
          </v-col>
          <v-col>
            <v-text-field label="C"></v-text-field>
          </v-col>
          <v-col>
            <v-text-field label="D"></v-text-field>
          </v-col>
          <v-col class="d-flex">
            <v-select :items="listItems" label=""></v-select>
          </v-col>
          <v-col>
            <v-btn>Modify</v-btn>
          </v-col>
        </v-row>
        <v-data-table :headers="headers" hide-default-header :items="items" disable-sort
                      hide-default-footer class="elevation-0">
        </v-data-table>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        {text: 'A', value: 'a'},
        {text: 'B', value: 'b'},
        {text: 'C', value: 'c'},
        {text: 'D', value: 'd'},
        {text: 'Action', value: 'action'},
        {text: 'Modify', value: 'modify'}
      ],
      items: [
        {
          a: 'value',
          b: 'value',
          c: 'value',
          d: 'value'
        },

      ],
      listItems: ['option 1', 'option 2']
    };
  },
};
</script>

修改
导出默认值{
数据（）{
返回{
标题：[
{文本：'A'，值：'A'}，
{文本：'B'，值：'B'}，
{文本：'C'，值：'C'}，
{文本：'D'，值：'D'}，
{text:'Action'，value:'Action'}，
{text:'Modify'，value:'Modify'}
],
项目：[
{
a:‘价值’，
b:‘价值’，
c:‘价值’，
d:‘价值’
},
],
列表项：[‘选项1’、‘选项2’]
};
},
};

看起来

---

我想知道的是，我是否可以将文本输入、下拉列表和按钮与第一个数据表的相应标题对齐。类似地，我是否可以将第二个datatable的列名与第一个datatable的标题对齐，而不为第二个datatable添加标题？

如果编写CSS，您可以执行任何您想要的操作。