Bootstrap Table行内嵌套可折叠表格：多余td生成问题解决

你遇到的问题有两个核心根源：

• 首先是HTML结构错误：包含折叠嵌套表格的<td>没有被包裹在<tr>标签里，浏览器解析DOM时会因此出现异常，生成多余的未定义元素。
• 其次是Bootstrap Table插件的作用范围问题：当你给主表加上data-toggle="table"属性后，插件会自动识别页面上所有<table>元素（包括嵌套的子表格）并初始化，这就干扰了嵌套表格的正常渲染，进而产生多余的<td>。

咱们分两步来修复：

1. 修复HTML结构错误 #

把包含折叠内容的<td>放到独立的<tr>中，确保所有<td>都属于对应的<tr>。同时注意修正colspan的数值（主表有9个表头列，之前写的12是错误的），给嵌套表格加个id方便后续区分：

<tbody>
  <!-- 主表数据行 -->
  <tr>
    <td>
      <button class="btn btn-light btn-xs" data-toggle="collapse" data-target="#demo1">
        <i class="fas fa-chevron-down"></i>
      </button>
    </td>
    <td>#757894</td>
    <td>Example</td>
    <td>Example</td>
    <td>Example</td>
    <td>06-07-2018</td>
    <td>Example</td>
    <td>15s</td>
    <td>
      <span class="badge badge-danger">Declined</span>
    </td>
  </tr>
  <!-- 嵌套表格所在行 -->
  <tr>
    <td colspan="9" class="hiddenRow">
      <div class="accordian-body collapse" id="demo1">
        <table class="table table-striped table-light" id="nested-table">
          <thead>
            <tr>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>some date</td>
              <td>some date</td>
              <td>
                <a href="#" class="btn btn-default btn-sm">
                  <i class="glyphicon glyphicon-cog"></i>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>
</tbody>

2. 限制Bootstrap Table仅作用于主表 #

不建议用data-toggle="table"这种自动初始化方式，改用JS手动初始化主表，明确指定只处理主表，避免干扰嵌套表格：

1. 先移除主表上的data-toggle="table"、data-target="table"等自动初始化属性；
2. 添加以下JS代码：

$(document).ready(function() {
  // 仅初始化主表，启用排序功能
  $('#table').bootstrapTable({
    sortable: true
  });
});

这样插件只会处理id="table"的主表，嵌套子表格不会被Bootstrap Table初始化，就不会生成多余的<td>了。

整合所有修改后的完整代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>

<table class="table table-dark table-bordered mt-5" id="table">
  <thead>
    <tr>
      <th></th>
      <th data-sortable="true">Example</th>
      <th data-sortable="true">Example</th>
      <th data-sortable="true">Example</th>
      <th data-sortable="true">Example</th>
      <th data-sortable="true">Example</th>
      <th data-sortable="true">Example</th>
      <th data-sortable="true">Example</th>
      <th data-sortable="true">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <button class="btn btn-light btn-xs" data-toggle="collapse" data-target="#demo1">
          <i class="fas fa-chevron-down"></i>
        </button>
      </td>
      <td>#757894</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>06-07-2018</td>
      <td>Example</td>
      <td>15s</td>
      <td>
        <span class="badge badge-danger">Declined</span>
      </td>
    </tr>
    <tr>
      <td colspan="9" class="hiddenRow">
        <div class="accordian-body collapse" id="demo1">
          <table class="table table-striped table-light" id="nested-table">
            <thead>
              <tr>
                <th>Example</th>
                <th>Example</th>
                <th>Example</th>
                <th>Example</th>
                <th>Example</th>
                <th>Example</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Example</td>
                <td>Example</td>
                <td>Example</td>
                <td>some date</td>
                <td>some date</td>
                <td>
                  <a href="#" class="btn btn-default btn-sm">
                    <i class="glyphicon glyphicon-cog"></i>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#table').bootstrapTable({
    sortable: true
  });
});
</script>

这样修改后，主表排序功能正常，嵌套表格也能正常折叠，不会再生成多余的<td>元素了。

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