展开折叠表格行时如何实现行边框包裹子项？

需求描述 #

使用Bootstrap 5和jQuery开发带折叠行的表格，希望展开父行（如示例中的“T-Shirt”行）时，父行的边框能完整包裹其下方的所有子项（Nike、Adidas行）。

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<table class="table table-md table-borderless" id="table" style="width: 65%; color: #117AFF;">
  <thead>
    <tr class="thead">
      <th width="10%">NUMBER</th>
      <th>ITEM</th>
      <th></th>
      <th></th>
      <th width="20%">INFO</th>
      <th width="10%">INCLUDE</th>
    </tr>
  </thead>
  <!-- 折叠组容器 -->
  <tbody class="collapse-group shadow-sm">
    <tr class="header">
      <th>042</th>
      <th colspan="3">T-Shirt</th>
      <th><span>v</span></th>
      <th><input class="form-check-input mx-auto d-block" type="checkbox" id="flexCheckDefault1"></th>
    </tr>
    <tr class="child-row">
      <td class="align-middle col-1"><img src="img/bars-staggered-solid.svg" class="img-fluid w-25 mx-auto d-block"></td>
      <td class="align-middle col-1"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2"></td>
      <td class="align-middle col-8">Nike</td>
      <td class="align-middle col-6" colspan="2">   
        <div class="d-flex flex-column">
          <div class="text-xs">0 times, 0 times by Client</div>
          <div class="text-xs">0 times, 0 times by Client</div>
          <div class="text-xs">2 comments</div>
        </div>
      </td>
      <td class="align-middle"><i class="fa-regular fa-pen-to-square"></i></td>
    </tr>
    <tr class="child-row">
      <td class="align-middle col-1"><img src="img/bars-staggered-solid.svg" class="img-fluid w-25 mx-auto d-block"></td>
      <td class="align-middle col-1"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3"></td>
      <td class="align-middle col-8">Adidas</td>
      <td class="align-middle col-4" colspan="2">   
        <div class="d-flex flex-column">
          <div class="text-xs">0 times, 0 times by Client</div>
          <div class="text-xs">0 times, 0 times by Client</div>
          <div class="text-xs">2 comments</div>
        </div>
      </td>
      <td class="align-middle"><i class="fa-regular fa-pen-to-square"></i></td>
    </tr>
  </tbody>
  <tr class="addButton">
    <td colspan="6" width="100%"><a href="#" class="btn btn-success fw-light" role="button" aria-disabled="true">Add new</a></td>
  </tr>
</table>

CSS #

/* 折叠组容器 - 实现边框包裹核心 */
.collapse-group {
  border: 1px solid #0F6DFD;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}

tr.header {
  cursor: pointer;
  background-color: #f8f9fa;
}

input[type=checkbox]{
  transform: scale(1.20);
  padding: 10px;
}

.text-xs {
  font-size: 10px;
}

::-webkit-scrollbar {
  display: none;
}

/* 子行缩进增强层级 */
.child-row td:first-child {
  padding-left: 2rem;
}

jQuery #

$(document).ready(function() {
    // 默认隐藏子行
    $('.child-row').hide();
  
    $('.header').click(function() {
      // 切换展开/收起图标
      $(this).find('span').text(function(_, value) {
        return value == '^' ? 'v' : '^'
      });
      
      // 仅切换当前折叠组内的子行
      $(this).closest('.collapse-group').find('.child-row').slideToggle(100);
    });
  });

关键修改说明 #

• 结构重构：将父行和对应子行放入独立的<tbody>容器（添加collapse-group类），利用tbody作为天然的分组容器，解决tr元素无法跨级包裹子行的布局限制。
• 样式优化：给collapse-group设置边框、圆角和溢出隐藏，去掉原tr的缩放和轮廓样式，统一用容器控制外层包裹效果；子行添加左侧缩进，强化层级视觉差。
• 逻辑调整：修改子行选择范围为当前折叠组内，确保点击父行时只操作对应子项，避免干扰其他折叠模块。

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