Bootstrap 4a Accordion (Collapse) Table
.table-responsive {
.table {
.accordion-cell {
padding: 0 !important;
border: 0;
.in {
border-top: 1px solid #eceeef;
}
}
}
}
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Published</th>
<th>Comment Date</th>
</tr>
</thead>
<tbody>
<!-- Begin table row -->
<tr data-target="#accordion" data-toggle="collapse">
<!-- table-cells here -->
</tr>
<tr>
<td class="accordion-cell" colspan="5">
<div class="collapse" id="accordion" role="tabpanel">
HIDDEN STUFF
</div>
</td>
</tr><!-- / table row -->
<!-- Begin table row -->
<tr data-target="#accordion-2" data-toggle="collapse">
<!-- table-cells here -->
</tr>
<tr>
<td class="accordion-cell" colspan="5">
<div class="collapse" id="accordion-2" role="tabpanel">
HIDDEN STUFF
</div>
</td>
</tr><!-- / table row -->
</tbody>
</table>
</div>