当使用vuedragable包来启用列的拖动和重新排序时，如何使Vue.js DataGrid组件的标题和列体正确对齐？
下面是我目前为DataGrid.vue组件编写的代码：

<template>
  <div class="table-responsive">
    <table class="table table-striped table-hover" v-if="selectedColumns.length > 0">
      <thead>
        <draggable :list="selectedColumns" group="columns" @end="onEnd">
          <th v-for="(column, index) in selectedColumns" :key="index">{{ column }}</th>
        </draggable>
      </thead>
      <tbody>
        <draggable v-model="mergedData" group="rows">
          <tr v-for="(data, index) in mergedData" :key="index">
            <td v-for="(column, index) in selectedColumns" :key="index">
              {{ data[column.toLowerCase().replace(' ', '_')] !== undefined ? data[column.toLowerCase().replace(' ', '_')] : 'N/A' }}
            </td>
          </tr>
        </draggable>
      </tbody>
    </table>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'DataGrid',
  components: {
    draggable,
  },
  props: {
    selectedColumns: {
      type: Array,
      required: true,
    },
    mergedData: {
      type: Array,
      required: true,
    },
  },
  methods: {
    onEnd(event) {
      const oldIndex = event.oldIndex;
      const newIndex = event.newIndex;
      this.selectedColumns.splice(newIndex, 0, this.selectedColumns.splice(oldIndex, 1)[0]);
    },
  },
};
</script>

<style scoped>
/* Add any custom styles here */
</style>

我已经尝试使用具有table-responsive类的div Package table元素，但标题和列体仍然没有正确对齐。如何在保持响应性和拖动功能的同时使表内容正确对齐？
我的当前表如下所示：