I am trying ro make a nested table using vuejs, but the styling is so wierd, do you guys have any Idea what’s wrong with it?
the parents table

this is what happens when I press the drop down button

below are the code for the nested table:

<!-- src/components/NodeTableRow.vue -->
<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="[node]"
      item-value="id"
      item-key="id"
      show-expand
      :expanded.sync="expanded"
      hide-default-header
      class="child-table"
    >
      <template v-slot:item.action="{ item }">
        <v-btn @click="goToDetails(item)">Details</v-btn>
      </template>
      <template v-slot:expanded-item="{ item }">
        <tr>
          <td :colspan="headers.length" class="nested-cell">
            <v-data-table
              v-if="item.children && item.children.length"
              :headers="headers"
              :items="item.children"
              item-value="id"
              item-key="id"
              class="nested-table"
              hide-default-header
            >
              <template v-slot:item.action="{ item }">
                <v-btn @click="goToDetails(item)">Details</v-btn>
              </template>
              <template v-slot:expanded-item="{ item }">
                <node-table-row
                  :node="item"
                  :headers="headers"
                  :expanded.sync="expanded"
                  :level="level + 1"
                  @goToDetails="goToDetails"
                />
              </template>
            </v-data-table>
            <v-alert v-else type="info">No child group</v-alert>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  name: 'NodeTableRow',
  props: {
    node: {
      type: Object,
      required: true,
    },
    headers: {
      type: Array,
      required: true,
    },
    expanded: {
      type: Array,
      required: true,
    },
    level: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    goToDetails(node) {
      this.$emit('goToDetails', node);
    },
  },
};
</script>

<style scoped>
.nested-cell {
  padding: 0;
}
.nested-table {
  margin: 0;
  border: none;
  width: 100%;
}
</style>

I try to change the styling, but still it doesnt work, I hope that I could create just a normal nested table