如何用bootstrap 5制作手风琴表？

Question

我需要用Bootstrap 5制作一个类似屏幕截图的手风琴桌子。我做了一些研究，发现我的桌子在出于某种原因折叠后会改变宽度。如果表可以替换为其他元素，则需要保存列和表元素之间的距离。放置手风琴时，桌子应保持宽度不变。

​

.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

但是，由于tr被包装在div中，因此其结构不正确。取而代之的是将tr设置为折叠项目...

https://codeply.com/p/MNPQYPyHQQ