【发布时间】：2021-10-27 06:24:09
【问题描述】：
我需要使用 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>【问题讨论】：
标签： html css html-table accordion bootstrap-5