如何使用Bootstrap 5制作手风琴表格并解决折叠后宽度变化问题

问题根源 #

1. HTML结构不符合表格规范：<tbody> 的直接子元素仅允许为 <tr>，现有代码在 <tbody> 内嵌套 <div class="accordion-item"> 会触发浏览器自动调整DOM结构，导致布局计算异常，折叠时触发宽度重排。
2. 表格使用自动宽度布局：未固定列宽时，折叠动作带来的内容变化会触发表格重新计算列宽，引发宽度跳动。

修复方案 #

新增CSS规则

在原有样式基础上补充以下代码：

/* 固定表格布局，禁止内容变化触发列宽重算 */
table {
  table-layout: fixed;
  width: 100%;
}
/* 固定各列宽度，对齐原有布局 */
table th:nth-child(2), table td:nth-child(2) {
  width: 40%;
}
table th:nth-child(3), table td:nth-child(3) {
  width: 30%;
}
table th:nth-child(4), table td:nth-child(4) {
  width: 30%;
}
/* 限制collapse过渡仅作用于高度，避免影响宽度 */
.accordion-collapse {
  transition: height 0.35s ease;
}
/* 移除accordion默认样式，不破坏原有表格视觉效果 */
.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}
.accordion-button::after {
  display: none;
}

调整HTML结构

删除<tbody>内非法的<div class="accordion-item">节点，将手风琴交互属性直接绑定到对应<tr>上即可，修正后可保证折叠、展开过程中表格宽度无任何变化。

内容的提问来源于stack exchange，提问作者Єгор Чевардін