Table collapse/expand rows
Bootstrap 5 Table collapse/expand rows component
Responsive Table collapse/expand rows built with Bootstrap 5. Use an accordion to collapse a table row vertically to show or hide content.
Basic example
Click + below to show and hide the table content.
| # | 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: '+';
}
Need even more robust tables? Try Data Den.
- Quick customization & hyper-focus on data management
- Easily integrate it with any project (not only MDB)
- Column Pinning, Drag&Drop Columns, Advanced Filtering & much more
For enterprise projects & users seeking advanced data controls. Tailor your data your way.