Accordion table
Bootstrap 5 Accordion table component
Accordion tables are a fantastic way to display tabular data in a compact and organized format. You can easily create dynamic and responsive accordion tables to enhance user interaction and data presentation on your site.
Responsive accordion table built with Bootstrap 5. Combine tables with expandable rows for a user-friendly, interactive data display and seamless navigation.
Basic example
| # | Heading | Heading | Heading |
|---|---|---|---|
| Cell | Cell | Cell | |
| Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="accordion-toggle collapsed"
id="accordion1"
data-mdb-collapse-init
data-mdb-parent="#accordion1"
href="#collapseOne"
aria-controls="collapseOne"
>
<td class="expand-button"></td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="3">
<div id="collapseOne" class="collapse in p-3">
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value 1</div>
</div>
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value 2</div>
</div>
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value 3</div>
</div>
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value 4</div>
</div>
</div></td>
</tr>
<tr class="accordion-toggle collapsed"
id="accordion2"
data-mdb-collapse-init
data-mdb-parent="#accordion2"
href="#collapseTwo"
aria-controls="collapseTwo"
>
<td class="expand-button"></td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="4">
<div id="collapseTwo" class="collapse in p-3">
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value</div>
</div>
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value</div>
</div>
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value</div>
</div>
<div class="row">
<div class="col-2">label</div>
<div class="col-6">value</div>
</div>
</div></td>
</tr>
</tbody>
</table>
</div>
tr.hide-table-padding td {
padding: 0;
}
.expand-button {
position: relative;
}
.accordion-toggle .expand-button:after
{
position: absolute;
left:.75rem;
top: 50%;
transform: translate(0, -50%);
content: '-';
}
.accordion-toggle.collapsed .expand-button:after
{
content: '+';
}