Vue+Bootstrap表格父行无法占满整行宽度的问题求助

你的核心问题是修改了<table>的默认display属性为flex，这完全破坏了表格原生的布局机制——表格本来是基于列宽计算、行自适应的布局模型，改成flex后就丢失了这些特性，导致父行无法占满宽度。另外，你把子<tr>嵌套在父<tr>里面的写法也不符合HTML规范（<tr>只能包含<td>/<th>），这也会加剧布局错乱。

下面是具体的修复方案：

第一步：恢复表格原生布局，移除flex设置 #

先把CSS里破坏表格布局的代码删掉，让表格用默认的display:table：

table {
    border: 5px solid red !important;
    width: 100%; /* 强制表格占满容器宽度 */
    table-layout: fixed; /* 可选：让列宽均匀分配，避免内容拉伸 */
}

thead{
    border: 5px solid blue;
}

tbody{
    border: 5px solid green;
}

.parent{
    border: 1px solid brown;
}

td{
    border: 5px solid black;
}

/* 可选：给子行加缩进，区分层级 */
.child-row td:first-child {
    padding-left: 2rem;
}

.grandchild-row td:first-child {
    padding-left: 4rem;
}

第二步：修正HTML结构，符合表格规范 #

把嵌套在父<tr>里的子行、孙子行移出来，作为<tbody>的直接子元素，同时保证每个<tr>的<td>数量和表头一致（或者用colspan合并列），这样表格布局才能正确对齐：

<table class="table">
  <thead>
    <tr> 
      <th scope="col"></th>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Gender</th>
      <th scope="col">Ability</th>
      <th scope="col">Minimal distance</th>
      <th scope="col">Weight</th>
      <th scope="col">Born</th>
      <th scope="col">In space since</th>
      <th scope="col">Beer consumption (l/y)</th>
      <th scope="col">Knows the answer?</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <!-- 父行 -->
    <tr class="parent" v-for="item in data" :key="item.data.ID">
      <td>
        <button class="bg-transparent" @click="toggleChildren(item)">
          <i class="bi bi-caret-right-fill"></i>
        </button>
      </td>
      <td>{{ item.data.ID }}</td>
      <td>{{ item.data.Name }}</td>
      <td>{{ item.data.Gender }}</td>
      <td>{{ item.data.Ability }}</td>
      <td>{{ item.data['Minimal distance'] }}</td>
      <td>{{ item.data.Weight }}</td>
      <td>{{ item.data.Born }}</td>
      <td>{{ item.data['In space since'] }}</td>
      <td>{{ item.data['Beer consumption (l/y)'] }}</td>
      <td>{{ item.data['Knows the answer?'] }}</td>
      <td>
        <button class="btn btn-danger" @click="removeItem(item,null)">Remove</button>
      </td>
    </tr>

    <!-- 子行：移出父tr，作为tbody的独立行 -->
    <template v-for="item in data" :key="`child-group-${item.data.ID}`">
      <tr 
        v-if="item.children && item.children.has_nemesis && Array.isArray(item.children.has_nemesis.records) && item.children.has_nemesis.records.length && item.childrenVisible"
        class="child-row"
        v-for="child in item.children.has_nemesis.records" 
        :key="`child-${child.data.ID}`"
      >
        <td></td> <!-- 和父行的箭头列对齐 -->
        <td>{{ child.data.ID }}</td>
        <td>{{ child.data['Character ID'] }}</td>
        <td>{{ child.data['Is alive?'] }}</td>
        <td>{{ child.data.Years }}</td>
        <!-- 填充剩余空列，匹配表头的12列 -->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <button @click="toggleChildren(child)">
            <i class="bi bi-caret-right-fill"></i>
          </button>
        </td>
        <td>
          <button @click="removeItem(child, item)">Remove</button>
        </td>
      </tr>

      <!-- 孙子行 -->
      <template v-for="child in item.children.has_nemesis.records" :key="`grandchild-group-${child.data.ID}`">
        <tr 
          v-if="child.childrenVisible"
          class="grandchild-row"
          v-for="secret in child.children.has_secrete.records" 
          :key="`grandchild-${secret.data.ID}`"
        >
          <td></td> <!-- 缩进对齐 -->
          <td>{{ secret.data.ID }}</td>
          <td>{{ secret.data['Nemesis ID'] }}</td>
          <td>{{ secret.data['Secrete Code'] }}</td>
          <!-- 填充剩余空列 -->
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </template>
    </template>
  </tbody>
</table>

第三步：保留原有展开/收起逻辑 #

你的toggleChildren方法和childrenVisible状态可以继续使用，用来控制子行、孙子行的显示隐藏，完全不需要依赖flex布局来实现层级展示。

这样修改后，表格会恢复原生的100%宽度布局，父行、子行都会自动占满表格宽度，同时层级结构也能正常展开收起。

内容的提问来源于stack exchange，提问作者Petr