Bootstrap5表格在折叠元素显示/隐藏时如何保持宽度一致

云原生阿岚

2026-8-28

Bootstrap5 表格折叠状态宽度不稳定解决方案

问题根源

Bootstrap默认的.collapse折叠组件在隐藏状态使用display: none属性，该状态下元素脱离正常文档流，不参与表格宽度计算。浏览器渲染表格时会仅根据当前可见内容计算列宽，就会出现折叠隐藏时表格收缩、展开时宽度撑开的跳变问题。
另外你贴出的代码存在标签未闭合问题：id="credits_id"的折叠容器div缺少闭合标签，会干扰浏览器的布局计算，修复前先把这部分标签补全。

可选修复方案

方案1：强制表格固定占满容器（改动最小）

直接给标签添加Bootstrap自带的w-100

添加自定义CSS：

.table-stable {
  width: 100%;
  table-layout: fixed;
}

给表格标签添加对应类：

<table class="table table-sm table-hover table-stable">

这种方式不需要改动业务结构，加完后表格宽度会完全跟随外层栅格容器，不会因为内部折叠内容的显隐变化跳变。

方案2：给对应列设置最小宽度

如果希望保留表格默认的自动列宽计算逻辑，可以直接给存放折叠内容的

设置匹配展开内容的最小宽度，哪怕折叠内容隐藏，列的最小宽度也会被纳入表格宽度计算：

<!-- 根据自身内容实际宽度调整min-width数值即可 -->
<td style="min-width: 320px;">
  <div>
    <label class="h6">
      Take On Me
    </label>
  </div>
  <div class="collapse" id="credits_id">
    <div class="lh-1">
      <label class="small figure-caption">Performed by </label>
      <span>
        <a href="/artist.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=a-ha&amp;cid=0$=Artists$19126" class="small figure-caption">a-ha</a>
        <label class="small figure-caption"> </label>
      </span>
    </div>
  </div>
</td>