Search code examples
htmlcsshtml-tableaccordionbootstrap-5

How to make accordion table with bootstrap 5?

I need to make an accordion table like in the screenshot using Bootstrap 5. I did some research and found that my table changes width after collapsing for some reason. If the table can be replaced with some other element, then you need to save the columns and the distance between the elements of the table. The table should maintain its width when the accordion is laid out.

.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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

enter image description here

Solution

  • The problem is white-space: nowrap; that's set on .table-responsive. remove it...

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

    Then the collapse expands as expected and doesn't effect the table width.

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

    But the HTML is improperly structured because the tr are wrapped in div. instead make the tr the accordion collapse items...

    https://codeply.com/p/MNPQYPyHQQ