html - 如何用 bootstrap 5 制作 Accordion table ？

Question

我需要使用 Bootstrap 5 制作一个像屏幕截图中那样的 Accordion 表格。我做了一些研究，发现我的表格由于某种原因在折叠后改变了宽度。如果表格可以用其他元素替换，则需要保存列和表格元素之间的距离。展开 Accordion 时，表格应保持其宽度。

.table-responsive {
  border-radius: 30px;
  white-space: nowrap;
}

table td {
  background-clip: content-box;
  border-color: #000000;
}

table tbody tr,
#business-table table thead tr th span,
#business-table table thead tr th img {
  cursor: pointer;
}

table td:first-child {
  width: 40px;
}

table thead {
  background: linear-gradient(86.71deg, #B1CF4A 1.62%, #249F5B 158.89%);
  box-shadow: 0px 4px 15px rgba(19, 19, 19, 0.25);
  z-index: 10;
}

table tbody {
  z-index: 9;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive bg-white pb-5">
  <table class="table table-hover m-0">
    <thead class="text-white">
      <tr>
        <th class="border-0 ps-4"></th>
        <th class="border-0 p-4 pe-3 ps-0">
          <span>Name</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
        </th>
        <th class="border-0 p-4 pe-3 ps-0 text-center">
          <span>Date</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
        </th>
        <th class="border-0 p-4 pe-0 ps-0 text-end">
          <span>Budget</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
        </th>
        <th class="border-0 pe-4"></th>
      </tr>
    </thead>
    <tbody class="accordion" id="accordionExample">
      <tr>
        <th class="border-0 ps-4"></th>
        <td class="p-4 pe-3 ps-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
          <span>NameExample</span>
        </td>
        <td class="p-4 pe-3 ps-0 text-center">2017 — 2020</td>
        <td class="p-4 pe-0 ps-0 text-end"><span>100000</span>₴</td>
        <th class="border-0 pe-4"></th>
      </tr>
      <div class="accordion-item">
        <tr class="accordion-header" id="headingOne" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <th class="border-0 ps-4"></th>
          <td class="p-4 pe-3 ps-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
            <span>NameExample</span>
          </td>
          <td class="p-4 pe-3 ps-0 text-center">2007 — 2008</td>
          <td class="p-4 pe-0 ps-0 text-end"><span>100000</span>₴</td>
          <th class="border-0 pe-4"></th>
        </tr>
        <tr>
          <th class="border-0 ps-4"></th>
          <td colspan="3" class="p-0">
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing
                and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does
                limit overflow.
              </div>
            </div>
          </td>
          <th class="border-0 pe-4"></th>
        </tr>
      </div>
      <tr>
        <th class="border-0 ps-4"></th>
        <td class="p-4 pe-3 ps-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
          <span>NameExample</span>
        </td>
        <td class="p-4 pe-3 ps-0 text-center">1995 — 2050</td>
        <td class="p-4 pe-0 ps-0 text-end"><span>100000</span>₴</td>
        <th class="border-0 pe-4"></th>
      </tr>
      <tr>
        <th class="border-0 ps-4"></th>
        <td class="p-4 pe-3 ps-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
          <span>NameExample</span>
        </td>
        <td class="p-4 pe-3 ps-0 text-center">2017 — 2019</td>
        <td class="p-4 pe-0 ps-0 text-end"><span>50000</span>₴</td>
        <th class="border-0 pe-4"></th>
      </tr>
      <tr>
        <th class="border-0 ps-4"></th>
        <td class="p-4 pe-3 ps-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
          <span>NameExample</span>
        </td>
        <td class="p-4 pe-3 ps-0 text-center">2019 — 2020</td>
        <td class="p-4 pe-0 ps-0 text-end"><span>50000</span>₴</td>
        <th class="border-0 pe-4"></th>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

问题是在 .table-responsive 上设置的 white-space: nowrap;。删除它...

.table-responsive {
    border-radius: 30px;
}

然后折叠按预期展开并且不影响表格宽度。

https://codeply.com/p/7Gmd6ApWHX

---

但 HTML 的结构不正确，因为 tr 被包裹在 div 中。而是让 tr 成为 Accordion 折叠项...

https://codeply.com/p/MNPQYPyHQQ