如何在Django模板中正确实现嵌套表格的列对齐

一、强制列对齐的修复方案 #

你的核心问题是嵌套子表格和主表格列宽不匹配，且子表格外层容器带来额外间距。可以通过以下步骤修复：

1. 统一列宽规则并固定表格布局
   给主表格和子表格都添加table-layout: fixed，让浏览器严格按照设置的列宽渲染，不受内容长度影响。同时确保主、子表格的每一列width值完全对应，包括表头和数据列。

2. 移除子表格外层多余容器
   原代码中子表格的card和card-body会带来默认的margin/padding，导致子表格和主表格错位，直接移除这些容器，让子表格紧贴父单元格。

3. 修正colspan与列数匹配
   确保子表格的列数和主表格完全一致，避免因列数差异导致对齐偏差。

修改后的代码示例：

<div class="card">
  <div class="card-body p-0">
    <table class="table" style="width: 100%; table-layout: fixed;">
      <tbody>
        <tr>
          <th bgcolor="gray" style="color: white; width:3%;">aaaaaaaa</th>
          <th bgcolor="gray" style="color: white; width:3%;">bbbbbbbb</th>
          <!-- 补充剩余20个表头，每个设置对应width -->
          <th bgcolor="gray" style="color: white; width:3%;">uuuuuuuu</th>
          <th bgcolor="gray" style="color: white; width:3%;">vvvv</th>
        </tr>
        <tr>
          <td style="width:3%;">
            <button type="button" class="btn btn-primary float-center" data-toggle="collapse" data-target="#test">aaaaaaaaa</button>
          </td>
          <td style="width:3%;">bbbbbbbbb</td>
          <!-- 补充剩余20个数据列，每个设置对应width -->
          <td style="width:3%;">uuuuuuuuuuuuuuu</td>
          <td style="width:3%;">
            <a href="#" class="btn btn-danger float-center">vvvv</a>
          </td>
        </tr>
        <tr>
          <td colspan="22">
            <div class="collapse" id="test" style="padding:0;">
              <table class="table mb-0" style="width: 100%; table-layout: fixed;">
                <tr>
                  <td bgcolor="#E5E5E5" style="width:3%;">aaaaaaaaa</td>
                  <td bgcolor="#E5E5E5" style="width:3%;">bbb</td>
                  <!-- 补充剩余20个子表格列，每个设置对应width -->
                  <td bgcolor="#E5E5E5" style="width:3%;">uuuuuuuuuuuuuuuuuu</td>
                  <td bgcolor="#E5E5E5" style="width:3%;">
                    <a href="#" class="btn btn-danger float-center">vvvv</a>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

二、更优替代方案：取消嵌套表格，用主表格行实现折叠 #

嵌套表格本身容易出现对齐问题，更合理的做法是将折叠内容作为主表格的一行，每一列对应主表格的列，天然实现列对齐，同时也能满足折叠需求：

<div class="card">
  <div class="card-body p-0">
    <table class="table" style="width: 100%; table-layout: fixed;">
      <tbody>
        <tr>
          <th bgcolor="gray" style="color: white; width:3%;">aaaaaaaa</th>
          <th bgcolor="gray" style="color: white; width:3%;">bbbbbbbb</th>
          <!-- 补充剩余表头列 -->
          <th bgcolor="gray" style="color: white; width:3%;">uuuuuuuu</th>
          <th bgcolor="gray" style="color: white; width:3%;">vvvv</th>
        </tr>
        <tr>
          <td style="width:3%;">
            <button type="button" class="btn btn-primary float-center" data-toggle="collapse" data-target="#test-row">aaaaaaaaa</button>
          </td>
          <td style="width:3%;">bbbbbbbbb</td>
          <!-- 补充剩余数据列 -->
          <td style="width:3%;">uuuuuuuuuuuuuuu</td>
          <td style="width:3%;">
            <a href="#" class="btn btn-danger float-center">vvvv</a>
          </td>
        </tr>
        <!-- 折叠内容作为主表格的一行，每列对应主表格列 -->
        <tr class="collapse" id="test-row">
          <td bgcolor="#E5E5E5" style="width:3%;">aaaaaaaaa</td>
          <td bgcolor="#E5E5E5" style="width:3%;">bbb</td>
          <!-- 补充剩余折叠内容列 -->
          <td bgcolor="#E5E5E5" style="width:3%;">uuuuuuuuuuuuuuuuuu</td>
          <td bgcolor="#E5E5E5" style="width:3%;">
            <a href="#" class="btn btn-danger float-center">vvvv</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

这种结构下，折叠行的列宽完全继承主表格，不会出现错位问题，代码也更简洁，同时依然支持你之前需要的折叠功能。

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