I want to create an accordion table similar to the one shown in the screenshot using Bootstrap 5. However, I noticed that my table's width changes after collapsing for some reason. If it's possible to replace the table with a different element, I need to ensure that the columns and the spacing between elements are preserved. The goal is to maintain the table's width when the accordion is expanded.
.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e011e00">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f809f81">[email protected]</a>/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">
.... (The rest of the code remains unchanged)...
</tbody>
</table>
</div>